如何使用babel-jest进行传输测试

Question

我正在为React应用程序编写测试，并在编译我在测试文件中导入的类时遇到一个问题。运行测试套件时

i get the following error:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/node_modules/react-redux/es/connect/connect.js:5
import connectAdvanced from '../components/connectAdvanced';
^^^^^^ 

我尝试使用babel-jest来使用transform属性和modulePathIgnorePatterns来传输文件。我的jest.config.json看起来像：

{
  "moduleNameMapper": {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
  },
  "setupFiles": [
    "raf/polyfill",
    "<rootDir>/test/testSetup.js"
  ],
  "transform": {
    "^.+\\.jsx?$": "babel-jest"
  }
}

我的babel.rc文件(在根目录中)

{
    "presets": [ "react", "es2015", "stage-2" ],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread",
    ]
}

我的package.json中有以下软件包：

 "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0",
    "eslint": "^5.3.0",
    "eslint-plugin-react": "^7.10.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^23.5.0",
    "babel-jest": "^23.6.0"
    "mkdirp": "^0.5.1",
    "prettier": "^1.13.7",
    "prettier-eslint": "^8.8.2",
    "prop-types": "^15.6.0",
    "react-test-renderer": "^16.5.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5",
    "webpack-merge": "^4.1.4",
    "yargs": "^12.0.1"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "css-loader": "^1.0.0",
    "eventing-bus": "^1.3.3",
    "filesize": "^3.6.1",
    "i18next": "^11.5",
    "node-sass": "^4.8.3",
    "react": "^16.4",
    "react-circular-progressbar": "^1.0.0",
    "react-dom": "^16.4",
    "react-redux": "^5.0",
    "react-truncate": "^2.4.0",
    "redux": "^4.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.1"
  }

谁知道如何修改我的jest.config或.babelrc文件，这样我的测试就可以毫无问题地编译了？提前谢谢。

Answer 1

您的问题是：/node_modules中的js文件在默认情况下不会编译。

在浏览器中运行代码是非常好的(这正是为什么没有编译这些模块的原因，因为您不需要这样做)。

但是jest使用Node运行，Node不理解import语法。最好的解决方案是运行测试时的模块。

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

在解决这些问题时，还可以在运行玩笑时使用--no-cache。