Esta es mi configuración de broma del archivo package.json:
"jest": { "automock": false, "browser": true, "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileMock.js", "\\.(css|less)$": "identity-obj-proxy" }, "moduleFileExtensions": [ "js", "jsx" ], "moduleDirectories": [ "node_modules" ], "transform": { "^.+\\.jsx?$": "./node_modules/babel-jest", "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "./app/tests/mocks/FileTransformer.js" }, "testEnvironment": "jsdom", "testPathDirs": [ "./app/tests" ], "testRegex": ".*.test.js", "verbose": true }Y el archivo .babelrc ubicado en mi carpeta raíz:
{ "plugins": ["syntax-dynamic-import", "transform-runtime"], "presets": [ [ "es2015", { "modules": false } ], "react", "stage-0" ], "env": { "start": { "presets": [ "react-hmre" ] } } }De acuerdo con la documentación que se encuentra en la página de inicio de broma, esto es todo lo que necesito para que babel funcione, es mágico.
Independientemente, esta prueba:
import React from 'react'; import {shallow} from 'enzyme'; import Landing from '../components/Landing.component'; describe('<Landing/>', () => { it('should render a header to the page', () => { const landing = shallow(<Landing/>); expect(landing.find('h1').text()).toBe('This is the Landing component'); }); });devoluciones:
FAIL app/tests/Landing.component.test.js ● Test suite failed to run /Users/shooshte/PersonalProjects/surviveJS/app/tests/Landing.component.test.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react'; ^^^^^^ SyntaxError: Unexpected token import at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)¿Qué estoy haciendo mal?
Jest establece la variable env para probar, así que tuve que agregar mis ajustes preestablecidos a la configuración env en .babelrc:
{ "plugins": ["syntax-dynamic-import", "transform-runtime"], "presets": [ [ "es2015", { "modules": false } ], "react", "stage-0" ], "env": { "start": { "presets": [ "react-hmre" ] }, "test": { "presets": ["es2015", "react", "stage-0"] } } }Cada preajuste anual solo recopila lo que se ratificó en ese año. babel-preset-env reemplaza a
es2015,es2016,es2017,latest
Basado en esto, en las últimas configuraciones, debe usar/reemplazar sus complementos/ajustes preestablecidos de es2015 y cualquier esX por el nuevo: env .
babel-preset-env con npm install ..babelrc debe actualizar en consecuencia: { "presets": [ "env", "stage-0", "react-native" ], "plugins": ... }Más información sobre la Documentación oficial de los plugins de Babel .
☝️ Recuerde que el orden de los complementos/ajustes preestablecidos en la matriz es importante.
En mi caso, tenía la siguiente configuración .babelrc :
{ "presets": [ ["env", { "modules": false }], "react", "stage-2" ], "plugins": [ "transform-runtime", "transform-class-properties", "react-hot-loader/babel" ] } Aunque se especificó babel-env , todavía recibí el error. Para solucionarlo tuve que eliminar los "módulos": bandera falsa .