How to debug React jest enzyme test cases











up vote
2
down vote

favorite












When am trying to debug Rect Jest enzyme test cases in terminal, am getting the following error and am stuck because of that.



I created the app using create-react-app and following is my configuration:



.babelrc






{
"env": {
"test": {
"sourceMaps": "inline",
"presets": ["es2015", "react-app"],
"plugins": ["transform-export-extensions"],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
}
}





Jest config from package.json






"jest": {
"testMatch": [
"**/src/**/?(*.)(spec|test).js?(x)"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"moduleFileExetnsions": [
"ts",
"txx",
"js",
"json"
],
"transform": {
"^.+\.jsx$": "babel-jest",
"^.+\.js$": "babel-jest"
}
}





Test case:






import { shallow } from 'enzyme';
import App from './App';
describe('App', () => {
it('should render app', () => {

const component = shallow(<App />);

expect(component).toMatchSnapshot();
});
});





Getting the following error:






Test suite failed to run

ReferenceError: [BABEL] .../src/containers/App.spec.js: Unknown option: /node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/node_modules/babel-preset-react-app/index.js")

at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
at Array.map (<anonymous>)
at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)





Edit:



Above error gone after changing "test" --> "dev" in .babelrc, but getting the another error:



"Jest encountered an unexpected token" at shallow(< App debug / >);










share|improve this question









New contributor




Rakesh Makluri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
























    up vote
    2
    down vote

    favorite












    When am trying to debug Rect Jest enzyme test cases in terminal, am getting the following error and am stuck because of that.



    I created the app using create-react-app and following is my configuration:



    .babelrc






    {
    "env": {
    "test": {
    "sourceMaps": "inline",
    "presets": ["es2015", "react-app"],
    "plugins": ["transform-export-extensions"],
    "only": [
    "./**/*.js",
    "node_modules/jest-runtime"
    ]
    }
    }
    }





    Jest config from package.json






    "jest": {
    "testMatch": [
    "**/src/**/?(*.)(spec|test).js?(x)"
    ],
    "snapshotSerializers": [
    "enzyme-to-json/serializer"
    ],
    "moduleFileExetnsions": [
    "ts",
    "txx",
    "js",
    "json"
    ],
    "transform": {
    "^.+\.jsx$": "babel-jest",
    "^.+\.js$": "babel-jest"
    }
    }





    Test case:






    import { shallow } from 'enzyme';
    import App from './App';
    describe('App', () => {
    it('should render app', () => {

    const component = shallow(<App />);

    expect(component).toMatchSnapshot();
    });
    });





    Getting the following error:






    Test suite failed to run

    ReferenceError: [BABEL] .../src/containers/App.spec.js: Unknown option: /node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

    A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

    Invalid:
    `{ presets: [{option: value}] }`
    Valid:
    `{ presets: [['presetName', {option: value}]] }`

    For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/node_modules/babel-preset-react-app/index.js")

    at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
    at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)





    Edit:



    Above error gone after changing "test" --> "dev" in .babelrc, but getting the another error:



    "Jest encountered an unexpected token" at shallow(< App debug / >);










    share|improve this question









    New contributor




    Rakesh Makluri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.






















      up vote
      2
      down vote

      favorite









      up vote
      2
      down vote

      favorite











      When am trying to debug Rect Jest enzyme test cases in terminal, am getting the following error and am stuck because of that.



      I created the app using create-react-app and following is my configuration:



      .babelrc






      {
      "env": {
      "test": {
      "sourceMaps": "inline",
      "presets": ["es2015", "react-app"],
      "plugins": ["transform-export-extensions"],
      "only": [
      "./**/*.js",
      "node_modules/jest-runtime"
      ]
      }
      }
      }





      Jest config from package.json






      "jest": {
      "testMatch": [
      "**/src/**/?(*.)(spec|test).js?(x)"
      ],
      "snapshotSerializers": [
      "enzyme-to-json/serializer"
      ],
      "moduleFileExetnsions": [
      "ts",
      "txx",
      "js",
      "json"
      ],
      "transform": {
      "^.+\.jsx$": "babel-jest",
      "^.+\.js$": "babel-jest"
      }
      }





      Test case:






      import { shallow } from 'enzyme';
      import App from './App';
      describe('App', () => {
      it('should render app', () => {

      const component = shallow(<App />);

      expect(component).toMatchSnapshot();
      });
      });





      Getting the following error:






      Test suite failed to run

      ReferenceError: [BABEL] .../src/containers/App.spec.js: Unknown option: /node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

      A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

      Invalid:
      `{ presets: [{option: value}] }`
      Valid:
      `{ presets: [['presetName', {option: value}]] }`

      For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/node_modules/babel-preset-react-app/index.js")

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
      at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)





      Edit:



      Above error gone after changing "test" --> "dev" in .babelrc, but getting the another error:



      "Jest encountered an unexpected token" at shallow(< App debug / >);










      share|improve this question









      New contributor




      Rakesh Makluri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      When am trying to debug Rect Jest enzyme test cases in terminal, am getting the following error and am stuck because of that.



      I created the app using create-react-app and following is my configuration:



      .babelrc






      {
      "env": {
      "test": {
      "sourceMaps": "inline",
      "presets": ["es2015", "react-app"],
      "plugins": ["transform-export-extensions"],
      "only": [
      "./**/*.js",
      "node_modules/jest-runtime"
      ]
      }
      }
      }





      Jest config from package.json






      "jest": {
      "testMatch": [
      "**/src/**/?(*.)(spec|test).js?(x)"
      ],
      "snapshotSerializers": [
      "enzyme-to-json/serializer"
      ],
      "moduleFileExetnsions": [
      "ts",
      "txx",
      "js",
      "json"
      ],
      "transform": {
      "^.+\.jsx$": "babel-jest",
      "^.+\.js$": "babel-jest"
      }
      }





      Test case:






      import { shallow } from 'enzyme';
      import App from './App';
      describe('App', () => {
      it('should render app', () => {

      const component = shallow(<App />);

      expect(component).toMatchSnapshot();
      });
      });





      Getting the following error:






      Test suite failed to run

      ReferenceError: [BABEL] .../src/containers/App.spec.js: Unknown option: /node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

      A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

      Invalid:
      `{ presets: [{option: value}] }`
      Valid:
      `{ presets: [['presetName', {option: value}]] }`

      For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/node_modules/babel-preset-react-app/index.js")

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
      at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)





      Edit:



      Above error gone after changing "test" --> "dev" in .babelrc, but getting the another error:



      "Jest encountered an unexpected token" at shallow(< App debug / >);






      {
      "env": {
      "test": {
      "sourceMaps": "inline",
      "presets": ["es2015", "react-app"],
      "plugins": ["transform-export-extensions"],
      "only": [
      "./**/*.js",
      "node_modules/jest-runtime"
      ]
      }
      }
      }





      {
      "env": {
      "test": {
      "sourceMaps": "inline",
      "presets": ["es2015", "react-app"],
      "plugins": ["transform-export-extensions"],
      "only": [
      "./**/*.js",
      "node_modules/jest-runtime"
      ]
      }
      }
      }





      "jest": {
      "testMatch": [
      "**/src/**/?(*.)(spec|test).js?(x)"
      ],
      "snapshotSerializers": [
      "enzyme-to-json/serializer"
      ],
      "moduleFileExetnsions": [
      "ts",
      "txx",
      "js",
      "json"
      ],
      "transform": {
      "^.+\.jsx$": "babel-jest",
      "^.+\.js$": "babel-jest"
      }
      }





      "jest": {
      "testMatch": [
      "**/src/**/?(*.)(spec|test).js?(x)"
      ],
      "snapshotSerializers": [
      "enzyme-to-json/serializer"
      ],
      "moduleFileExetnsions": [
      "ts",
      "txx",
      "js",
      "json"
      ],
      "transform": {
      "^.+\.jsx$": "babel-jest",
      "^.+\.js$": "babel-jest"
      }
      }





      import { shallow } from 'enzyme';
      import App from './App';
      describe('App', () => {
      it('should render app', () => {

      const component = shallow(<App />);

      expect(component).toMatchSnapshot();
      });
      });





      import { shallow } from 'enzyme';
      import App from './App';
      describe('App', () => {
      it('should render app', () => {

      const component = shallow(<App />);

      expect(component).toMatchSnapshot();
      });
      });





      Test suite failed to run

      ReferenceError: [BABEL] .../src/containers/App.spec.js: Unknown option: /node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

      A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

      Invalid:
      `{ presets: [{option: value}] }`
      Valid:
      `{ presets: [['presetName', {option: value}]] }`

      For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/node_modules/babel-preset-react-app/index.js")

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
      at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)





      Test suite failed to run

      ReferenceError: [BABEL] .../src/containers/App.spec.js: Unknown option: /node_modules/babel-preset-react-app/index.js.overrides. Check out http://babeljs.io/docs/usage/options/ for more information about options.

      A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

      Invalid:
      `{ presets: [{option: value}] }`
      Valid:
      `{ presets: [['presetName', {option: value}]] }`

      For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "/node_modules/babel-preset-react-app/index.js")

      at Logger.error (node_modules/babel-core/lib/transformation/file/logger.js:41:11)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
      at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
      at Array.map (<anonymous>)
      at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
      at OptionManager.mergePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
      at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
      at OptionManager.init (node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
      at File.initOptions (node_modules/babel-core/lib/transformation/file/index.js:212:65)






      reactjs jestjs enzyme






      share|improve this question









      New contributor




      Rakesh Makluri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      Rakesh Makluri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited yesterday





















      New contributor




      Rakesh Makluri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 2 days ago









      Rakesh Makluri

      113




      113




      New contributor




      Rakesh Makluri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Rakesh Makluri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Rakesh Makluri is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          Try to use this .babel config:



          {
          "presets": ["es2015", "react-app"],
          "plugins": ["transform-export-extensions"],
          "only": [
          "./**/*.js",
          "node_modules/jest-runtime"
          ]
          }


          It should help you.






          share|improve this answer





















          • It would be helpful to explain in your answer why that should help him and what about his was wrong to introduce this problem
            – Eric Majerus
            2 days ago










          • @EricMajerus in most cases, people just want a working solution, without tedious explanations. If this were from the author of the question - so yes, I would explain the decision.
            – Sviat Kuzhelev
            22 hours ago











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });






          Rakesh Makluri is a new contributor. Be nice, and check out our Code of Conduct.










           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372393%2fhow-to-debug-react-jest-enzyme-test-cases%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote













          Try to use this .babel config:



          {
          "presets": ["es2015", "react-app"],
          "plugins": ["transform-export-extensions"],
          "only": [
          "./**/*.js",
          "node_modules/jest-runtime"
          ]
          }


          It should help you.






          share|improve this answer





















          • It would be helpful to explain in your answer why that should help him and what about his was wrong to introduce this problem
            – Eric Majerus
            2 days ago










          • @EricMajerus in most cases, people just want a working solution, without tedious explanations. If this were from the author of the question - so yes, I would explain the decision.
            – Sviat Kuzhelev
            22 hours ago















          up vote
          0
          down vote













          Try to use this .babel config:



          {
          "presets": ["es2015", "react-app"],
          "plugins": ["transform-export-extensions"],
          "only": [
          "./**/*.js",
          "node_modules/jest-runtime"
          ]
          }


          It should help you.






          share|improve this answer





















          • It would be helpful to explain in your answer why that should help him and what about his was wrong to introduce this problem
            – Eric Majerus
            2 days ago










          • @EricMajerus in most cases, people just want a working solution, without tedious explanations. If this were from the author of the question - so yes, I would explain the decision.
            – Sviat Kuzhelev
            22 hours ago













          up vote
          0
          down vote










          up vote
          0
          down vote









          Try to use this .babel config:



          {
          "presets": ["es2015", "react-app"],
          "plugins": ["transform-export-extensions"],
          "only": [
          "./**/*.js",
          "node_modules/jest-runtime"
          ]
          }


          It should help you.






          share|improve this answer












          Try to use this .babel config:



          {
          "presets": ["es2015", "react-app"],
          "plugins": ["transform-export-extensions"],
          "only": [
          "./**/*.js",
          "node_modules/jest-runtime"
          ]
          }


          It should help you.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered 2 days ago









          Sviat Kuzhelev

          931215




          931215












          • It would be helpful to explain in your answer why that should help him and what about his was wrong to introduce this problem
            – Eric Majerus
            2 days ago










          • @EricMajerus in most cases, people just want a working solution, without tedious explanations. If this were from the author of the question - so yes, I would explain the decision.
            – Sviat Kuzhelev
            22 hours ago


















          • It would be helpful to explain in your answer why that should help him and what about his was wrong to introduce this problem
            – Eric Majerus
            2 days ago










          • @EricMajerus in most cases, people just want a working solution, without tedious explanations. If this were from the author of the question - so yes, I would explain the decision.
            – Sviat Kuzhelev
            22 hours ago
















          It would be helpful to explain in your answer why that should help him and what about his was wrong to introduce this problem
          – Eric Majerus
          2 days ago




          It would be helpful to explain in your answer why that should help him and what about his was wrong to introduce this problem
          – Eric Majerus
          2 days ago












          @EricMajerus in most cases, people just want a working solution, without tedious explanations. If this were from the author of the question - so yes, I would explain the decision.
          – Sviat Kuzhelev
          22 hours ago




          @EricMajerus in most cases, people just want a working solution, without tedious explanations. If this were from the author of the question - so yes, I would explain the decision.
          – Sviat Kuzhelev
          22 hours ago










          Rakesh Makluri is a new contributor. Be nice, and check out our Code of Conduct.










           

          draft saved


          draft discarded


















          Rakesh Makluri is a new contributor. Be nice, and check out our Code of Conduct.













          Rakesh Makluri is a new contributor. Be nice, and check out our Code of Conduct.












          Rakesh Makluri is a new contributor. Be nice, and check out our Code of Conduct.















           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372393%2fhow-to-debug-react-jest-enzyme-test-cases%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Wiesbaden

          Marschland

          Dieringhausen