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

问题描述

我开始使用Jest和Enzyme为React应用程序重新编写单元测试用例，并尝试使用像"test": "jest --watch"而不是"test": "react-scripts test"测试这样的jest运行测试用例时，需要通过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逐步进行设置，但是此错误Support for the experimental syntax 'jsx' isn't currently enabled阻止了我进一步前进.而且，正如某些线程中所建议的那样，我一直在尝试使用npm install --save-dev @babel/plugin-transform-react-jsx，并尝试将相同的插件添加到babel配置中，如下面的package.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();
  });
});

推荐答案

看着错误，它似乎无法加载预设以进行反应.切换到配置文件，并将babel的配置从package.json移至该文件. 一个示例文件如下所示，它将与package.json位于同一级别，并称为babel.config.js

Looking at the error it looks its not able to load the preset for react. Switch to the config file and move the configuration of babel from package.json to it. A sample file would look like below and will be located at the same level as package.json and called as 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
  };
};

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