실험 구문 'jsx'에 대한 Babel 던지기 지원이 현재 활성화되지 않았습니다.

실험 구문 'jsx'에 대한 Babel 던지기 지원이 현재 활성화되지 않았습니다.

리액션 어플리케이션을 위해 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 구성에 추가하려고 했습니다.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();
  });
});

이 문제가 농담 사용과 관련된 경우,

jaje config for의package.json처럼 보여야 한다

타이프 스크립트 포함 -

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

js-가 있는 경우

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

끊임없이 진화하는 현재의 솔루션을 추가합니다.
농담과 테스트에 의존해서 바닐라 크래를 먹었어요

    "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

에러를 보면, 리액트용의 프리셋을 로드할 수 없는 것 같습니다.컨피규레이션파일로 전환하여 패키지에서 바벨 설정을 이동합니다.잘 들어라.샘플 파일은 아래와 같이 패키지와 같은 레벨에 배치됩니다.json 및 babel.config.config.config로 호출됩니다.

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

나는 농담과 관련이 없었기 때문에 도움이 될 수 있을지 모르겠다.하지만 같은 오류가 발생하여 구글을 많이 검색한 후 https://stackoverflow.com/a/52693007/10952640을 찾았습니다.

웹 팩에서 babel/preset-react를 설정하는 데 누락된 TL;DR은 다음과 같습니다.

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

이 문제를 해결하려면builds/에 의해 작성된 폴더npm run build나와 같은 레벨로package.json제거 후 뛰었습니다.jest --coverage다시 성공했어요이것과 관련이 있을 수도 있습니다.

를 사용하고 있는 경우jest.config.js웹 팩이 있는 파일, 해당 파일은 루트 디렉토리에 있어야 합니다.package.json.

언급URL : https://stackoverflow.com/questions/62820035/babel-throwing-support-for-the-experimental-syntax-jsx-isnt-currently-enabled