Babel throwing 当前未启用对实验性语法“jsx”的支持

Posted 2023-02-21

【中文标题】Babel throwing 当前未启用对实验性语法“jsx”的支持

【英文标题】：Babel throwing Support for the experimental syntax 'jsx' isn't currently enabled

【发布时间】：2020-10-30 08:29:46

【问题描述】：

我开始使用 Jest 和 Enzyme 为 react 应用程序编写新的单元测试用例，当尝试使用 jest 运行测试用例时，例如 "test": "jest --watch" 而不是 "test": "react-scripts test" 测试通过 babel 让运行者理解反应语法。

并且一直在使用 babel 逐步进行设置，但是这个错误 Support for the experimental syntax 'jsx' isn't currently enabled 阻止了我走得更远。正如一些线程中所建议的那样，我一直在尝试使用npm install --save-dev @babel/plugin-transform-react-jsx 并尝试将相同的插件添加到 babel 配置中，如下面的 package.json 文件所示，但仍然没有运气。

这是我的 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();
  );
);

【问题讨论】：

您是否已退出您的应用程序？如果不是，我认为任何附加配置都不会生效。您实际上并未在包文件中显示使用 jest --watch，请提供正确的 minimal reproducible example。

@jonrsharpe 抱歉我没收到这个Have you ejected your app? 抱歉我对单元测试完全陌生，你能推荐我一些代码示例吗？

如果您使用的是react-scripts，您是否使用 Create React App 创建了您的应用程序？如果是这样，您是否在开始添加自己的随机配置之前运行了软件包文件中显示的弹出命令？

那么我建议不要尝试修改设置，除非你真的知道你在做什么，要么坚持提供的东西，fork 创建你自己的或eject.

@Venki 你应该始终将 Babel 与 Jest 一起使用，至少对于 React 测试是这样，因为 React 应用程序不使用有效的 JS。不清楚你为什么开始使用jest 命令而不是react-scripts。 react-scripts test 使用预配置的 Jest 设置。如果您确实需要自定义 Jest，则需要弹出，您将获得 CRA 使用的 Jest 配置，您可以进行扩展。从头开始为 CRA 等复杂设置编写 Jest 配置并不是最舒适的入门方式。

【参考方案1】：

查看错误，它看起来无法加载预设以进行反应。切换到配置文件，将 babel 的配置从 package.json 移到其中。 示例文件如下所示，与 package.json 位于同一级别，并称为 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
  ;
;

【讨论】：

不幸的是，情况并非如此，问题是 Jest 配置中的 Babel 特有的。

@Rain 是的，这是在使用 Jest 时做出反应的相关 babel 配置。

@EstusFlask，你能教我什么时候在 Jest 中使用和不使用 babel 吗？实际上，没有使用 babel 测试用例也成功通过了，但出于好奇，我只是将 react-scripts 修改为 jest，然后按照 udemey 在线课程中的建议尝试运行 npm test，然后开始对 babel 感到头疼。 Estus，你能帮忙解决上述问题吗？

【参考方案2】：

如果这个问题与使用 jest 有关，

package.json 的笑话配置应该是这样的

使用打字稿-

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

用js-

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

【讨论】：

非常感谢，这救了我的命。这是许多错误的解决方案，例如意外的保留字“接口”、实验语法“jsx”等。

这是问题的最佳答案

【参考方案3】：

随着事情的不断发展，添加我当前的解决方案。 我有一个带有开玩笑和测试依赖关系的香草 cra

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

解决方法很简单

安装yarn add @babel/preset-react

然后正确设置babel.config.js

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

注意 在 .babelrc 中，与 babel.config.js 相比，您对预设数组使用不同的语法

【参考方案4】：

我通过删除npm run build 创建的builds/ 文件夹来解决此问题，该文件夹与我的package.json 处于同一级别。删除后，我再次运行jest --coverage，它成功了。 它还必须与this 做一些事情。

【参考方案5】：

我不确定是否有帮助，因为对我来说与开玩笑无关。但是我遇到了同样的错误，经过很多谷歌我发现了这个https://***.com/a/52693007/10952640

TL;DR 你可能也错过了在 webpack 上设置 babel/preset-react：

rules: [
  
    test: /\.(js|jsx)$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader',
    options:  presets: ['@babel/env', '@babel/preset-react'] ,
  ,