Jest setup "SyntaxError: Unexpected token export"
Jest setup "SyntaxError: Unexpected token export"
我正在对一个目前没有测试的现有项目实施测试。我的测试无法编译 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)
我找到的解决方法是 'whitelist' node_modules
在 package.json jest 配置中,像这样:
"jest": {
"transformIgnorePatterns": [
"!node_modules/"
]
}
这似乎是一个 hack,因为 运行 导入 node_modules/lodash-es/lodash.js
.
的简单测试需要 1 分钟多的时间
在这里发布更完整的答案:
默认情况下 Jest 不会转换 node_modules 因为 node_modules 很大。大多数节点模块被打包以公开 ES5 代码,因为它无需任何进一步转换即可运行(并且在很大程度上向后兼容)。
在您的情况下,lodash-es 专门公开了 ES 模块,这些模块需要由 Jest 通过 babel 构建。
您可以尝试缩小白名单范围,这样 Jest 就不会尝试通过 babel 传递 node_modules 中的每个 JavaScript 文件。
我认为您的情况下正确的配置是:
"jest": {
"transformIgnorePatterns": [
"/!node_modules\/lodash-es/"
]
}
我不得不将其添加到我的 .jestconfig
:
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!lodash-es)"
]
如果其他解决方案中的 none 适合您,您可以开玩笑地尝试一下
"moduleNameMapper": {
"^lodash-es$": "lodash"
}
它会在测试运行时用commonjs版本替换lodash-es
。
对于正在寻找修复的 create-react-app
用户,以下是对我有用的方法:
// package.json
...
"jest": {
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!lodash-es)"
]
},
...
覆盖 jest.config.js
文件中的选项对我不起作用。请记住,并非每个选项都可以被覆盖,以下是支持的选项列表:https://create-react-app.dev/docs/running-tests#configuration
将 .babelrc 重命名为 babel.config.js 并添加 transformIgnorePatterns 对我有用。
module.exports = {
"presets": ["@babel/preset-env"]
}
P.S。我的笑话版本是:
“开玩笑”:“24.9.0”
https://github.com/facebook/jest/issues/6229#issuecomment-419885857
可能有人觉得这有用:
就我而言,我有一个使用 lodash-es
包的 Angular 应用程序。测试过程中,出现了和作者一样的错误
OPatel 的回答对我来说效果很好,只需稍作调整(将其添加到您的 jest.config.ts
):
"moduleNameMapper": {
"lodash-es": "lodash"
}
更改后,我还需要将 "esModuleInterop": true
添加到我的 tsconfig.spec.json
中 compilerOptions
属性 以摆脱 TypeError: cloneDeep_1.default is not a function
。
更新:
解决上述所有 lodash 方法后 return LodashWrapper 而不是实际值,例如
const clone = cloneDeep(object); // LodashWrapper
为了解决这个问题,我使用了这个解决方案:
https://github.com/nrwl/nx/issues/812#issuecomment-787141835
moduleNameMapper: {
"^lodash-es/(.*)$": "<rootDir>/node_modules/lodash/",
}
我正在对一个目前没有测试的现有项目实施测试。我的测试无法编译 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)
我找到的解决方法是 'whitelist' node_modules
在 package.json jest 配置中,像这样:
"jest": {
"transformIgnorePatterns": [
"!node_modules/"
]
}
这似乎是一个 hack,因为 运行 导入 node_modules/lodash-es/lodash.js
.
在这里发布更完整的答案:
默认情况下 Jest 不会转换 node_modules 因为 node_modules 很大。大多数节点模块被打包以公开 ES5 代码,因为它无需任何进一步转换即可运行(并且在很大程度上向后兼容)。
在您的情况下,lodash-es 专门公开了 ES 模块,这些模块需要由 Jest 通过 babel 构建。
您可以尝试缩小白名单范围,这样 Jest 就不会尝试通过 babel 传递 node_modules 中的每个 JavaScript 文件。
我认为您的情况下正确的配置是:
"jest": {
"transformIgnorePatterns": [
"/!node_modules\/lodash-es/"
]
}
我不得不将其添加到我的 .jestconfig
:
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!lodash-es)"
]
如果其他解决方案中的 none 适合您,您可以开玩笑地尝试一下
"moduleNameMapper": {
"^lodash-es$": "lodash"
}
它会在测试运行时用commonjs版本替换lodash-es
。
对于正在寻找修复的 create-react-app
用户,以下是对我有用的方法:
// package.json
...
"jest": {
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!lodash-es)"
]
},
...
覆盖 jest.config.js
文件中的选项对我不起作用。请记住,并非每个选项都可以被覆盖,以下是支持的选项列表:https://create-react-app.dev/docs/running-tests#configuration
将 .babelrc 重命名为 babel.config.js 并添加 transformIgnorePatterns 对我有用。
module.exports = {
"presets": ["@babel/preset-env"]
}
P.S。我的笑话版本是: “开玩笑”:“24.9.0”
https://github.com/facebook/jest/issues/6229#issuecomment-419885857
可能有人觉得这有用:
就我而言,我有一个使用 lodash-es
包的 Angular 应用程序。测试过程中,出现了和作者一样的错误
OPatel 的回答对我来说效果很好,只需稍作调整(将其添加到您的 jest.config.ts
):
"moduleNameMapper": {
"lodash-es": "lodash"
}
更改后,我还需要将 "esModuleInterop": true
添加到我的 tsconfig.spec.json
中 compilerOptions
属性 以摆脱 TypeError: cloneDeep_1.default is not a function
。
更新:
解决上述所有 lodash 方法后 return LodashWrapper 而不是实际值,例如
const clone = cloneDeep(object); // LodashWrapper
为了解决这个问题,我使用了这个解决方案: https://github.com/nrwl/nx/issues/812#issuecomment-787141835
moduleNameMapper: {
"^lodash-es/(.*)$": "<rootDir>/node_modules/lodash/",
}