Jest设置"SyntaxError:意外的令牌导出"

Question

我正在对目前没有测试的现有项目进行测试.我的测试无法编译node_modules/导入.

/Users/me/myproject/node_modules/lodash-es/lodash.js:10
export { default as add } from './add.js';
^^^^^^
SyntaxError: Unexpected token export

  at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
  at Object.<anonymous> (app/reducers/kind_reducer.js:2:43)
  at Object.<anonymous> (app/reducers/index.js:12:47)

我发现的解决方法是node_modules在package.json jest配置中'whitelist' ,如下所示:

"jest": {
    "transformIgnorePatterns": [
      "!node_modules/"
    ]
  }

这似乎是一个黑客,因为它需要超过1分钟来运行一个简单的导入测试node_modules/lodash-es/lodash.js.

感谢任何帮助或方向,谢谢!

Answer 1

我不得不把这个添加到我的.jestconfig:

"transformIgnorePatterns": [
  "<rootDir>/node_modules/(?!lodash-es)"
]

Answer 2

如果以上解决方案都不适合您，则可以开玩笑地尝试一下

"moduleNameMapper": {
    "^lodash-es$": "lodash"
}

lodash-es在测试运行时，它将替换为commonjs版本。

Answer 3

在这里发布更完整的答案:

默认情况下,Jest不会转换node_modules,因为node_modules很大.大多数节点模块都被打包以暴露ES5代码,因为它可以在没有任何进一步转换的情况下运行(并且在很大程度上向后兼容).

在您的情况下,lodash-es专门公开ES模块,这需要由Jest通过babel构建.

您可以尝试缩小白名单,以便Jest不会尝试通过babel传递node_modules中的每个javascript文件.

我认为你的案例中的正确配置是:

"jest": {
  "transformIgnorePatterns": [
    "/!node_modules\\/lodash-es/"
  ]
}

Answer 4

对于create-react-app正在寻找修复程序的用户，以下是对我有用的方法：

// package.json
...
  "jest": {
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!lodash-es)"
    ]
  },
...

覆盖jest.config.js文件中的选项对我不起作用。请记住，并非每个选项都可以被覆盖，这里是支持的选项列表：https ://create-react-app.dev/docs/running-tests#configuration

Answer 5

重命名.babelrc和babel.config.js添加transformIgnorePatterns对我有用。

module.exports = {
  "presets": ["@babel/preset-env"]
}

PS 我的笑话版本是：

"jest": "24.9.0"

使用 Babel 7 时，babel-jest 不会在 node_modules 中转译导入/导出

Answer 6

可能有人觉得这很有用：

就我而言，我有一个使用lodash-espackage.json 的 Angular 应用程序。在测试过程中，我也遇到了和作者一样的错误。

OPatel 的答案对我来说效果很好，只需稍加调整（将其添加到您的jest.config.ts）：

"moduleNameMapper": {
    "lodash-es": "lodash"
}

更改后，我还需要将 添加"esModuleInterop": true到我的tsconfig.spec.json属性中compilerOptions以摆脱TypeError: cloneDeep_1.default is not a function.

更新：

在上述解决方案之后，所有 lodash 方法都返回 LodashWrapper 而不是实际值，例如

const clone = cloneDeep(object); // LodashWrapper

为了摆脱这个问题，我使用了这个解决方案： https://github.com/nrwl/nx/issues/812#issuecomment-787141835

moduleNameMapper: {
    "^lodash-es/(.*)$": "<rootDir>/node_modules/lodash/$1",
}