javascript - usually - [React-Native][Jest] SyntaxError: Importación de token inesperada
test suite failed to run jest (2)
El problema es que el nodo no entiende los módulos ES6 y JEST es un proceso de nodo, por lo que al usar la import dentro de su prueba se produce este error. En lugar de babel, le pedimos específicamente a Webpack que compile los módulos ES6. Por lo tanto, podemos corregir este error diciéndole a babel que cuando estemos en el escenario de prueba, compile los módulos ES6 utilizando las siguientes configuraciones de configuración de babel
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
Usted puede descargar este plugin babel por npm
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs
Esperemos que esto solucione su problema.
Parece que babel transform funciona en mi código testcase, pero la sintaxis de es6 en node_modules no lo hace.
Error
ambiente
npm 4.5
MacOS Sierra
jest config
{
"preset": "react-native",
"globals": {
"__DEV__": true
},
"transform": {
"^.+//.js$": "babel-jest"
}
}
babelrc
{
"env": {
"test": {
"presets": ["react-native"],
"plugins": [["import", { "libraryName": "antd-mobile" }]]
},
"development": {
"presets": ["react-native"],
"plugins": [["import", { "libraryName": "antd-mobile" }]]
},
"production": {
}
}
}
caso de prueba
import ''react-native'';
import React from ''react'';
import renderer from ''react-test-renderer'';
import Index from ''../index.ios.js'';
it(''renders correctly'', () => {
const tree = renderer.create(
<Index />
);
});
paquete.json
{
"private": true,
"scripts": {
"web": "roadhog server",
"build-web": "cross-env NODE_ENV=production roadhog build",
"start": "react-native start",
"ios": "cross-env NODE_ENV=development node themes/theme.rn.config.js && react-native run-ios",
"android": "cross-env NODE_ENV=development node theme/theme.rn.config.js && react-native run-android",
"lint": "eslint --ext .js src test",
"precommit": "npm run lint",
"test": "cross-env NODE_ENV=test jest --config .jest.config.json --no-cache"
},
"engines": {
"install-node": "6.9.2"
},
"theme": "./themes/theme.web.config.js",
"dependencies": {
"antd-mobile": "^1.0.8",
"babel-runtime": "^6.9.2",
"dva": "^1.2.1",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"rc-form": "^1.3.0",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-native": "0.42.3",
"react-native-chart": "^1.0.8-beta",
"react-native-gesture-password": "^0.2.0",
"react-native-scrollable-tab-view": "^0.7.4",
"react-native-smart-gesture-password": "^2.1.0",
"react-navigation": "^1.0.0-beta.7",
"recharts": "^0.21.2",
"socket.io-client": "^1.7.3"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "^19.0.0",
"babel-plugin-dva-hmr": "^0.3.2",
"babel-plugin-import": "^1.1.1",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-react-native": "^1.9.1",
"cross-env": "^4.0.0",
"eslint": "^3.12.2",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.8.0",
"expect": "^1.20.2",
"husky": "^0.13.3",
"jest": "^19.0.2",
"less-vars-to-js": "^1.1.2",
"postcss-pxtorem": "^4.0.0",
"react-test-renderer": "15.4.2",
"redbox-react": "^1.3.2",
"roadhog": "^0.6.0-beta1"
}
}
mensaje de depuración
jest version = 19.0.2
test framework = jasmine2
config = {
"automock": false,
"bail": false,
"browser": false,
"cacheDirectory": "/var/folders/h3/bfmnzb_j3zg3pdffgps1w3vh0000gn/T/jest",
"clearMocks": false,
"coveragePathIgnorePatterns": [
"/node_modules/"
],
"coverageReporters": [
"json",
"text",
"lcov",
"clover"
],
"expand": false,
"globals": {
"__DEV__": true
},
"haste": {
"defaultPlatform": "ios",
"platforms": [
"android",
"ios",
"native"
],
"providesModuleNodeModules": [
"react-native"
]
},
"moduleDirectories": [
"node_modules"
],
"moduleFileExtensions": [
"js",
"json",
"jsx",
"node"
],
"moduleNameMapper": [
[
"^[./a-zA-Z0-9$_-]+//.(bmp|gif|jpg|jpeg|png|psd|svg|webp)$",
"RelativeImageStub"
],
[
"^React$",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react"
]
],
"modulePathIgnorePatterns": [
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/Libraries/react-native/",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/packager/"
],
"noStackTrace": false,
"notify": false,
"preset": "react-native",
"resetMocks": false,
"resetModules": false,
"roots": [
"/Users/erickim/Documents/Develop/react/glfm"
],
"snapshotSerializers": [],
"testEnvironment": "/Users/erickim/Documents/Develop/react/glfm/node_modules/jest-environment-node/build/index.js",
"testMatch": [
"**/__tests__/**/*.js?(x)",
"**/?(*.)(spec|test).js?(x)"
],
"testPathIgnorePatterns": [
"/node_modules/"
],
"testRegex": "",
"testResultsProcessor": null,
"testURL": "about:blank",
"timers": "real",
"transformIgnorePatterns": [
"node_modules/(?!(jest-)?react-native|react-clone-referenced-element)"
],
"useStderr": false,
"verbose": null,
"watch": false,
"setupFiles": [
"/Users/erickim/Documents/Develop/react/glfm/node_modules/babel-polyfill/lib/index.js",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/react-native/jest/setup.js"
],
"transform": [
[
"^.+//.js$",
"/Users/erickim/Documents/Develop/react/glfm/node_modules/babel-jest/build/index.js"
]
],
"rootDir": "/Users/erickim/Documents/Develop/react/glfm",
"name": "005c8bf9b4d78dfa0bb0e32c0c55b0fb",
"testRunner": "/Users/erickim/Documents/Develop/react/glfm/node_modules/jest-jasmine2/build/index.js",
"cache": false,
"watchman": true
}
Me lo imaginé. Por defecto, jest no transforma el código js de ES6 de node_modules . En mi caso, el paquete react-navigation módulo necesita ser traducido. Así que agregué transformIgnorePatterns a mi configuración de jest y todo funcionó:
{
"preset": "react-native",
"setupFiles": ["./test/setup.js"],
"globals": {
"__DEV__": true
},
"transform": {
"^.+//.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-navigation)/"
]
}