Babel Config错误:目前未启用对实验语法"jsx"的支持 [英] Babel Config Error: Support for the experimental syntax 'jsx' isn't currently enabled

问题描述

我正在尝试为我的 reactjs 项目使用Jest进行单元测试.

I am trying to make unit tests with Jest for my reactjs project.

当我要测试组件的呈现时，出现以下错误:

When I want to test the rendering of a component, I am getting the following error :

SyntaxError: /Users/jk/EpitechProjects/T-WEB-700/CountOfMoney_18/front/src/tests/components/Navbar.test.js: 
Support for the experimental syntax 'jsx' isn't currently enabled (9:29):

       7 | 
       8 | test('Navbar : should render navbar', ()=>{
    >  9 |     const wrapper = shallow(<Navbar />);
         |                             ^
      10 |     expect(wrapper.find('nav').length).toBe(1);

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of
your Babel config to enable transformation. If you want to leave it as-is,
add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to 
enable parsing.

但是，似乎无法识别 JSX 语法.
我已经尝试了 @ babel/preset-react 和 @ babel/plugin-syntax-jsx 建议，但是仍然存在相同的错误.

However, it does not seem to recognize the JSX syntax.
I have tried both @babel/preset-react and @babel/plugin-syntax-jsx suggestions , but the same error remains.

以下是我的一些配置文件:

Here are a few of my config files :

jest.config.json

jest.config.json

{
    "setupFiles": [
        "raf/polyfill",
        "<rootDir>/src/setupTests.js"
    ],
    "transform": {
        "^.+\\.(js?)$": "babel-jest"
      }
}

babel.config.js

babel.config.js

module.exports = {
    presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
  };

setupTests.js

setupTests.js

//import '@testing-library/jest-dom';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({
    adapter: new Adapter()
});

package.json

package.json

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/user-event": "^12.2.2",
    ...
    "babel": "^6.23.0",
    ...
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    ...
    "react-scripts": "4.0.0",
    "react-test-renderer": "^17.0.1",
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "testJ": "jest --config=jest.config.json"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-syntax-jsx": "^7.12.1",
    "@babel/preset-react": "^7.12.10",
    "@testing-library/react": "^11.2.2",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.5",
    "jest": "^26.6.3"

推荐答案

目前的罪魁祸首似乎是您的 babel.config.js ，您需要使其与<代码> @ babel/present-react .因此，更新如下:

The culprit at the moment seems to be your babel.config.js, you'll need to get it working with the @babel/present-react. So update as follows:

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    ['@babel/preset-react', {targets: {node: 'current'}}] // add this
  ]
};

这篇关于Babel Config错误:目前未启用对实验语法"jsx"的支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！