Babel抛出错误：“当前未启用对实验性语法'jsx'的支持”

Question

我最近开始使用 Jest 和 Enzyme 来编写 React 应用的单元测试，试图通过使用 Jest 运行测试用例（如 "test": "jest --watch"）而不是 "test": "react-scripts test"，以便让运行器理解 React 语法。我一步一步地使用 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();
  });
});

- Venkaiah Yepuri

---

你已经弹出你的应用程序了吗？如果没有，我认为任何其他配置都不会生效。你实际上没有在你的包文件中展示使用 jest --watch，请提供一个适当的 [mre]。 - jonrsharpe

@jonrsharpe 抱歉我没明白 Have you ejected your app? 的意思。很抱歉我对单元测试完全不熟悉，你能否给我提供一些代码示例？ - Venkaiah Yepuri

@jonrsharpe 你是用Create React App创建你的应用程序吗？ - 是的，在开始添加自己的随机配置之前，你是否运行了package文件中显示的eject命令？ - 没有。 - Venkaiah Yepuri

我建议，除非你真的知道自己在做什么，否则不要尝试调整设置，要么使用提供的内容，要么fork创建自己的内容，要么eject。 - jonrsharpe

@Venki，你应该始终在Jest中使用Babel，至少在React测试中，因为React应用程序不使用有效的JS。不清楚为什么你开始使用jest命令而不是react-scripts。react-scripts test使用预配置的Jest设置。如果你真的需要自定义Jest，你需要弹出，你将获得CRA使用的Jest配置，并且你可以扩展它。从头开始编写像CRA这样复杂的设置的Jest配置并不是最舒适的入门方式。 - Estus Flask

Answer 1

如果这个问题与使用jest有关，你的package.json的jest配置应该如下所示：使用typescript -

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

使用 JavaScript -

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

如果您有 jest.config.js 文件，则应该将此内容放在其中：

import type { Config } from 'jest'

const config: Config = {
  ...
  "transform": {
    "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
  }
  ....
}

export default config

- Sumit Lubal

---

我遇到了“在转换选项中找不到模块'ts-jest'”的错误。 - slartidan

@slartidan 安装 "ts-jest" - Jay Cork

你能否提供一个更完整的示例来说明在哪里插入jest？在子根级别不起作用。 - DarkTrick

你能否添加一份说明，如果你的Jest配置文件是一个单独的文件，比如jest.config.ts，应该把这段代码放在哪里？ - Manpreet

Answer 2

作为事情不断发展的一部分，我将我的当前解决方案添加在这里。
我使用了带有jest和test依赖项的vanilla 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 不同。

- Nigel Savage

---

尝试了其他建议，但它们都不起作用，这是对我有效的解决方案。 - Patrik Gustavsson

Answer 3

从错误来看，似乎无法加载React的预设。请切换到配置文件并将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
  };
};

- Rain.To

---

很遗憾，这不是事实。这个问题特指Jest配置中的Babel。 - Estus Flask

@Rain 是的，这是在使用Jest时与React相关的Babel配置。 - Venkaiah Yepuri

@EstusFlask，你能教我何时使用babel而何时不使用babel在Jest中吗？实际上，即使不使用babel，测试用例也可以成功通过，但由于有些好奇心，我刚刚将react-scripts修改为jest，然后尝试按照udemey在线课程建议运行npm test，结果遇到了babel的问题。Estus，你能帮忙解决上述问题吗？ - Venkaiah Yepuri

Answer 4

我不确定这是否有帮助，因为对我来说与jest无关。但是我遇到了相同的错误，在经过大量谷歌搜索后，我找到了这篇文章

简而言之，你可能忘记在webpack上设置babel/preset-react:

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

- BetoLima1

---

我遇到了完全相同的问题，但我的设置有点棘手。长话短说，我正在使用string-replace-loader在构建时有条件地导入组件。问题是我没有在webconfig.prod.config中添加presets: ['@babel/env', '@babel/preset-react']。感谢您指引我正确的方向:D - Mutu A.

你的答案中的代码位于哪个文件中？ - parsecer

Answer 5

我通过删除与我的package.json同级别的npm run build创建的builds/文件夹来解决了这个问题。在删除后，我再次运行jest --coverage，然后它就可以正常工作了。 这也可能与this有关。

- Lorz Ronz

Answer 6

如果您正在使用带有Webpack的jest.config.js文件，则可能的原因之一是需要将jest.config.js文件放在根目录中，与package.json处于同一级别。

- Petter