Babel.js 当前未启用对实验语法'jsx'的支持

rekjcdws 于 2022-12-16 发布在 Babel

关注(0)|答案(6)|浏览(253)

我刚开始使用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文件所示，但仍然没有运气。

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

babeljs

来源：https://stackoverflow.com/questions/62820035/babel-throwing-support-for-the-experimental-syntax-jsx-isnt-currently-enabled

6条答案

按热度按时间

7rtdyuoh1#

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

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

与js -

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

赞(0）回复(0）举报 2022-12-16

56lgkhnf2#

随着事情的不断发展，添加我当前的解决方案。
我有一个带有玩笑和测试依赖项的普通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',
              },
            },
          ],
        ],
      };

音符

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

赞(0）回复(0）举报 2022-12-16

h6my8fg23#

查看错误，它似乎无法加载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
  };
};

赞(0）回复(0）举报 2022-12-16

d8tt03nd4#

我不确定是否有帮助，因为对我来说，这与笑话无关。但我有同样的错误，经过大量的谷歌我发现这个https://stackoverflow.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'] },
  },

赞(0）回复(0）举报 2022-12-16

tag5nh1u5#

我通过删除builds/文件夹修复了这个问题，这个文件夹是由npm run build在与我的package.json相同的级别上创建的。删除后，我再次运行jest --coverage，它工作了。它也可以对此做一些事情。

赞(0）回复(0）举报 2022-12-16

camsedfj6#

如果您在Webpack中使用jest.config.js文件，该文件需要位于根目录中，与package.json处于同一级别。

赞(0）回复(0）举报 2022-12-16