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 / >);
reactjs jestjs enzyme
New contributor
add a comment |
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 / >);
reactjs jestjs enzyme
New contributor
add a comment |
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 / >);
reactjs jestjs enzyme
New contributor
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
reactjs jestjs enzyme
New contributor
New contributor
edited yesterday
New contributor
asked 2 days ago
Rakesh Makluri
113
113
New contributor
New contributor
add a comment |
add a comment |
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.
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
add a comment |
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.
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
add a comment |
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.
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
add a comment |
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.
Try to use this .babel
config:
{
"presets": ["es2015", "react-app"],
"plugins": ["transform-export-extensions"],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
It should help you.
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
add a comment |
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
add a comment |
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.
Rakesh Makluri is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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