Jest (ESM)在单元测试中从React Native加载文件时出现问题
在完全支持ESM的情况下运行Jest (现在可用！)以及使用the docs中所述的ts-jest的TypeScript。它工作得非常好！直到我尝试将其与React Native一起使用。
在任何具有RN组件的测试中，我在node_modules/react-native/index.js中都会得到一个错误提示SyntaxError: Cannot use import statement outside a module (见下文)。我认为这是因为在RN的package.json中没有"type": "module"，Jest不能将其作为一个具有.js文件扩展名的ES模块加载(.ts和.tsx在extensionsToTreatAsEsm中列出，当我将.js放在其中时，它会抱怨这是由package.json中的类型字段控制的)。
在同一个项目中，没有RN组件的测试很好，都是用TS + ESM编写的，没有Jest或babel转换(仅限ts-jest)。使用node --experimental-vm-modules node_modules/jest/bin/jest.js运行测试。
关于如何让它在node_modules中仅与具有.js文件扩展名的特定ES模块一起工作，有什么想法吗？提前谢谢你！
这是一个minimal repro。
我尝试过按照here描述的方式使用transformIgnorePatterns。我还尝试将预设设置为react-native (这会使它在类型声明中抛出有关“意外标识符”的错误，我猜是因为它不再使用ts-jest)。
Jest中的错误：
FAIL src/__tests__/native.test.tsx
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• 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/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/Users/justin/dev/sandbox/jest-esm-react-native/node_modules/react-native/index.js:14
import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
^^^^^^
SyntaxError: Cannot use import statement outside a modulePackage.json中的Jest配置：
"jest": {
"resetMocks": true,
"testEnvironment": "node",
"testMatch": [
"**/src/**/*.(spec|test).[tj]s?(x)"
],
"preset": "ts-jest/presets/default-esm",
"transform": {},
"extensionsToTreatAsEsm": [
".ts",
".tsx"
],
"globals": {
"ts-jest": {
"useESM": true
}
}
},回答 1
Stack Overflow用户
发布于 2021-10-31 13:43:34
修复了以下jest配置(从react native jest preset添加了元素)：
"jest": {
"haste": {
"defaultPlatform": "ios",
"platforms": [
"android",
"ios",
"native"
]
},
"resetMocks": true,
"testEnvironment": "node",
"testMatch": [
"**/src/**/*.(spec|test).[tj]s?(x)"
],
"preset": "ts-jest/presets/default-esm",
"transform": {
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|@react-native(-community)?)/)"
],
"extensionsToTreatAsEsm": [
".ts",
".tsx"
],
"globals": {
"ts-jest": {
"useESM": true
}
},
"setupFiles": [
"<rootDir>/node_modules/react-native/jest/setup.js"
],
"setupFilesAfterEnv": [
"@testing-library/jest-native/extend-expect"
]
},和babel配置：
module.exports = {
presets: [
'module:metro-react-native-babel-preset',
['@babel/preset-env', { loose: true }],
]
};https://stackoverflow.com/questions/69783085
复制相似问题
腾讯云开发者
