问题
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();
});
});
回答1:
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
};
};
回答2:
Sharing my answer here as well
I must have tried tons of different ways. Sharing what worked for me. Do take note of the versions, different versions might need tweaks.
My react project was created using create-react-app (CRA). Now since CRA hides babel and webpack config files and there is no way to modify them, there are basically 2 options:
- react eject (which I didn't try. Felt managing all by myself could get bit overwhelming).
- Use react-app-rewired to tweak babel configs without having to eject. (I used this)
I additionally used customize-cra. React-app-rewired suggests it for later versions of CRA.
Update scripts and add dev dependencies in package.json:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"docs": "jsdoc -c jsdoc.conf.json"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.1",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.6",
"@babel/preset-react": "^7.10.1"
}
config-overrides.js (must be at root level, i.e. at same directory level of package.json).
If error is from some library in node_modules, make sure to 'include' it (babelInclude):
const path = require('path');
const {
override,
babelInclude,
addBabelPreset,
addExternalBabelPlugin,
} = require('customize-cra');
module.exports = override(
babelInclude([
path.resolve('src'),
path.resolve('node_modules/react-native-animatable'),
]),
addBabelPreset("@babel/preset-react"),
addExternalBabelPlugin('@babel/plugin-proposal-class-properties'),
);
回答3:
Pretty sure its unrelated with Jest.
I have an app without tests setup and still getting the same error. My best guess is that <React.Fragment> needs some specific packages that are missing on your project.
I can't say which one as I am struggling with it myself.
https://github.com/babel/babel/issues/8655 - This is the closest issue I could find.
https://github.com/storybookjs/storybook/issues/11439 - Someone using storybook had the same "jsx" support is not currently enabled issue.
Do let me know if you find something.
来源：https://stackoverflow.com/questions/62820035/babel-throwing-support-for-the-experimental-syntax-jsx-isnt-currently-enabled