Babel throwing 目前未启用对实验性语法“jsx"的支持 [英] Babel throwing Support for the experimental syntax 'jsx' isn't currently enabled

问题描述

我开始使用 Jest 和 Enzyme 为 react 应用程序新编写单元测试用例，并尝试使用像 "test":"jest --watch" 而不是 test":react-scripts test" 测试通过 babel 以便运行程序理解 React 语法.

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.

并且一直在使用 babel 一步一步地进行设置，但是这个错误 目前没有启用对实验语法jsx"的支持阻止我走得更远.正如某些线程中所建议的，我一直在尝试使用 npm install --save-dev @babel/plugin-transform-react-jsx 并尝试将相同的插件添加到 babel 配置中，如下面的包所示.json 文件，但仍然没有运气.

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.

这是我的 package.json

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"
    }
  }
}

这是我的测试用例文件

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();
  });
});

推荐答案

如果此问题与使用玩笑有关，

If this issue is related to using jest,

你的 package.json 的 jest 配置应该看起来像

jest config for your package.json should look like

使用打字稿 -

"jest": {
    ...
    
    "transform": {
       "^.+\.(ts|tsx|js|jsx)$": "ts-jest"
    },
    
    ...
}

使用js -

"jest": {
    ...
    
    "transform": {
       "^.+\.(js|jsx)$": "babel-jest"
    },
    
    ...
}

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