如何使用 babel-jest 转译测试

Question

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

\n\n

i get the following error:\nJest encountered an unexpected token\nThis usually means that you are trying to import a file which Jest cannot parse, e.g. it\'s not plain JavaScript.\nBy default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".\n\nHere\'s what you can do:\n \xe2\x80\xa2 To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.\n \xe2\x80\xa2 If you need a custom transformation specify a "transform" option in your config.\n \xe2\x80\xa2 If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.\n\nYou\'ll find more details and examples of these config options in the docs:\nhttps://jestjs.io/docs/en/configuration.html\n\nDetails:\n\n/node_modules/react-redux/es/connect/connect.js:5\nimport connectAdvanced from \'../components/connectAdvanced\';\n^^^^^^ \n

\n\n

我尝试使用babel-jest该transform属性和modulePathIgnorePatterns. 我的 jest.config.json 看起来像：

\n\n

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

\n\n

我的 babel.rc 文件（位于根目录中）

\n\n

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

\n\n

我的 package.json 中有以下包：

\n\n

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

\n\n

谁知道我如何修改我的jest.config或.babelrc文件以便我的测试能够顺利编译？提前致谢。

\n

Answer 1

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

当您在浏览器中运行代码时完全没问题（这正是不编译此类模块的原因，因为您不需要这样做）。

但是 jest 使用 Node 运行，它不理解import语法。最好的解决方案是在运行测试时启用 node_modules 的 babel 转译。

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

--no-cache在修复此类问题时运行 jest 时也可使用。