Jest (ESM)在单元测试中会从React Native加载文件

Question

使用文档中描述的ts-jest运行具有完整ESM支持的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模块一起工作的任何想法?提前感谢!

这是一个最小的复制。

已尝试使用transformIgnorePatterns在这里描述。我也试过将预设设置为react-native(这使得它抛出关于"意外标识符"的错误;(我猜是因为它不再使用ts-jest)。

Error in 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 module

Jest config in package.json:

"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
}
}
},

Answer 1

修复了以下jest配置(从react native jest预设中添加元素):

"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 }],
]
};