web-dev-qa-db-fra.com

[React-Native] [Jest] SyntaxError: Importation inattendue de jetons

Il semble que babel transform fonctionne dans mon code de test, mais la syntaxe es6 dans node_modules ne fait pas.

Erreur

img

environnement

npm 4,5

MacOS Sierra

blague 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": {
    }
  }
}

cas de test

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

package.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"
  }
}

message de débogage

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
}
javascripttestingreact-nativejestjs
19
Kim

Je l'ai compris. Par défaut, jest ne transforme pas le code ES6 js de node_modules. Dans mon cas, le package react-navigation le module doit être traduit. J'ai donc ajouté transformIgnorePatterns à ma configuration de plaisanterie et tout a fonctionné:

{
  "preset": "react-native",
  "setupFiles": ["./test/setup.js"],
  "globals": {
    "__DEV__": true
  },
  "transform": {
    "^.+\\.js$": "babel-jest"
  },
  "transformIgnorePatterns": [
    "node_modules/(?!react-native|react-navigation)/"
  ]
}

https://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization

30
Kim

Le problème est que le nœud ne comprend pas les modules ES6 et JEST est un processus de nœud, donc l'utilisation de import dans votre test génère cette erreur. Au lieu de babel, nous demandons spécifiquement à Webpack de transcompiler les modules ES6. Ainsi, nous pouvons corriger cette erreur en disant à babel que lorsque nous sommes dans un scénario de test, veuillez combiner les modules ES6 en utilisant les paramètres de configuration babel ci-dessous

 "env": {
    "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
    }
}

vous pouvez télécharger ce plugin babel par npm

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

J'espère que cela résoudra votre problème.

3
arvindsc