如何用jest测试React Native Typescript应用程序组件

Question

我已经尝试用jest开始测试我的React Native Typescript组件很长一段时间了，但没有成功。我发现了很多例子/答案(包括：一个来源、另一个来源和另一个链接等(，但都没有帮助。将设置更改为示例项目示例(带有进一步的链接(或另一示例项目(另一示例(中所示的设置是不起作用的。

有了一些设置，我可以运行简单的测试，但如果我试图导入一个组件，我会得到错误：

● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• 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/en/configuration.html
Details:
/Users/XXX/node_modules/react-native-iphone-x-helper/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { Dimensions, Platform, StatusBar } from 'react-native';
                   ^^^^^^
SyntaxError: Cannot use import statement outside a module
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (node_modules/react-native-paper/lib/commonjs/components/BottomNavigation.tsx:13:1)

文件内容：

jest.config.js

module.exports = {
preset: 'react-native',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']

}

package.json"；玩笑；

"jest": {
"preset": "react-native",
"transform": {
"^.+\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
"\.(ts|tsx)$": "ts-jest"
},
"globals": {
"ts-jest": {
"tsConfig": "tsconfig.jest.json"
}
},
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"testRegex": "(/__tests__/.*|\.(test|spec))\.(ts|tsx|js)$"

}

tsconfig.json

{"compilerOptions": {
"target": "es6",
"module": "commonjs",
"allowJs": true,
"jsx": "react-native",
"noEmit": true, 
"strict": true, 
"noUnusedLocals": true,                      
"noUnusedParameters": true,                 
"noImplicitReturns": true,          
"noFallthroughCasesInSwitch": true,       
"moduleResolution": "node",               
"allowSyntheticDefaultImports": true,
"esModuleInterop": true, 
"skipLibCheck": true,                           
"forceConsistentCasingInFileNames": true        
}, "include": [
"src"
]}

有人能给我举一个有效的例子吗？

Answer 1

找到了一个有效的示例设置：带有允许运行测试的配置的示例。

我确实去掉了笑话.setup.js-file和

setupFilesAfterEnv: ['./jest.setup.js'],

在jest.config.js文件中。