0
254
ViewsBabel throwing La compatibilidad con la sintaxis experimental 'jsx' no está habilitada actualmente
Comencé a escribir casos de prueba de unidad usando Jest y Enzyme para la aplicación de reacción y cuando intenté ejecutar casos de prueba usando broma como "test": "jest --watch" en lugar "test": "react-scripts test" pasando por babel para que el corredor entienda la sintaxis de reacción.
Y he estado haciendo la configuración paso a paso usando babel, pero este error Support for the experimental syntax 'jsx' isn't currently enabled que me impide seguir adelante. Y como se sugiere en algunos hilos, he estado intentando con npm install --save-dev @babel/plugin-transform-react-jsx y traté de agregar el mismo complemento en la configuración de babel como se muestra en el archivo package.json a continuación, pero aún no tuve suerte. . 
Y este es mi paquete.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" } } }y aquí está mi archivo de caso de prueba
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(); }); });5 answers
Answer question0
Mirando el error, parece que no puede cargar el ajuste preestablecido para reaccionar. Cambie al archivo de configuración y mueva la configuración de babel de package.json a él. Un archivo de muestra se vería como a continuación y se ubicará en el mismo nivel que el paquete.json y se llamará como 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
Si este problema está relacionado con el uso de broma,
jest config para su package.json debería verse así
con mecanografiado -
"jest": { ... "transform": { "^.+\\.(ts|tsx|js|jsx)$": "ts-jest" }, ... }con js-
"jest": { ... "transform": { "^.+\\.(js|jsx)$": "babel-jest" }, ... }0
Agregar mi solución actual a medida que las cosas evolucionan constantemente.
Tuve un cra de vainilla con bromas y dependencias de prueba.
"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" },la solución fue sencilla
instalar
yarn add @babel/preset-reactluego configure correctamente
babel.config.js
module.exports = { presets: [ '@babel/preset-react', [ '@babel/preset-env', { targets: { node: 'current', }, }, ], ], };- Nota
en un.babelrc, usa una sintaxis diferente para la matriz de ajustes preestablecidos en comparación conbabel.config.js
0
No estoy seguro si ayuda porque para mí no estaba relacionado con la broma. Pero tuve el mismo error y después de mucho google encontré esto https://stackoverflow.com/a/52693007/10952640
TL; DR, podría faltar para configurar babel/preset-react en el paquete web también:
rules: [ { test: /\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', options: { presets: ['@babel/env', '@babel/preset-react'] }, },