reactjs - 如何使用 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 进行转译属性(property)和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 运行 import句法。最好的解决方案是enable babel transpilation of node_modules when you run tests .

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

也可以使用 --no-cache在解决此类问题时开玩笑。