0
255
ViewsBabel throwing Support for the experimental syntax 'jsx' isn't currently enabled
I started newly writing unit test cases using Jest and Enzyme for the react application and when try to run test cases using jest like "test": "jest --watch" rather "test": "react-scripts test" tests going through babel for the runner to understand react syntax.
And have been doing setup step by step using babel but this error Support for the experimental syntax 'jsx' isn't currently enabled stopping me to go further. And as suggested in some threads I have been trying with npm install --save-dev @babel/plugin-transform-react-jsx and tried to add the same plugin into babel configuration like shown in below package.json file but still no luck.
And this is my package.json
{
"name": "multitheme-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^3.9.0",
"@material-ui/icons": "^3.0.2",
"axios": "^0.18.0",
"babel-plugin-transform-export-extensions": "^6.22.0",
"jest-css-modules": "^2.1.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-redux": "^6.0.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"babel": {
"presets": [
"@babel/preset-react",
"@babel/preset-env",
"@babel/preset-flow"
],
"plugins": [
"@babel/plugin-transform-modules-commonjs",
"@babel/plugin-transform-react-jsx"
]
},
"devDependencies": {
"@babel/cli": "^7.10.4",
"@babel/core": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-modules-commonjs": "^7.10.4",
"@babel/plugin-transform-react-jsx": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-flow": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/runtime": "^7.10.4",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^7.1.5",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-stage-0": "^6.24.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.5.0",
"jest": "^23.6.0",
"jest-cli": "^26.1.0"
},
"jest": {
"verbose": true,
"clearMocks": true,
"collectCoverage": true,
"setupTestFrameworkScriptFile": "<rootDir>/src/setupTest.js",
"transform": {
"^.+\\.js$": "babel-jest"
},
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|scss)$": "identity-obj-proxy"
}
}
}
and here is my test case file
import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { shallow, configure } from 'enzyme';
import App from './App';
configure({adapter: new Adapter()});
describe('MyComponent', () => {
it('should render correctly in "debug" mode', () => {
const component = shallow(<App debug />);
expect(component).toMatchSnapshot();
});
});
5 answers
Answer question0
Looking at the error it looks its not able to load the preset for react. Switch to the config file and move the configuration of babel from package.json to it. A sample file would look like below and will be located at the same level as package.json and called as babel.config.js
module.exports = function (api) {
const presets = [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-flow'
];
const plugins = [
'@babel/plugin-transform-runtime',
];
/** this is just for minimal working purposes,
* for testing larger applications it is
* advisable to cache the transpiled modules in
* node_modules/.bin/.cache/@babel/register* */
api.cache(false);
return {
presets,
plugins
};
};
0
If this issue is related to using jest,
jest config for your package.json should look like
with typescript -
"jest": {
...
"transform": {
"^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
},
...
}
with js -
"jest": {
...
"transform": {
"^.+\\.(js|jsx)$": "babel-jest"
},
...
}
0
Adding my current solution as things constantly evolve.
I had a vanilla cra with jest and test dependencies
"devDependencies": {
"@babel/preset-env": "^7.14.9",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"jest": "^26.6.3"
},
the solution was simple
install
yarn add @babel/preset-reactthen correctly setup
babel.config.js
module.exports = {
presets: [
'@babel/preset-react',
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
- note
in a.babelrcyou use a different syntax for the presets array compared to thebabel.config.js
0
I'm not sure if helps because for me wasn't related to jest. But I had the same error and after a lot of google I found this https://stackoverflow.com/a/52693007/10952640
TL;DR you could be missing to set the babel/preset-react on webpack also:
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: { presets: ['@babel/env', '@babel/preset-react'] },
},