如何用玩笑测试 React Native Typescript 应用程序组件？答案

【问题标题】：How to test React Native Typescript app COMPONENTS with jest?如何用玩笑测试 React Native Typescript 应用程序组件？
【发布时间】：2021-08-01 21:47:12
【问题描述】：

我一直在尝试用 jest 来测试我的 React Native Typescript 组件，但没有成功。我找到了很多示例/答案（包括：one source、another source、yet another link 等），但没有一个有帮助。将设置更改为示例项目example（带有更多链接link）或另一个示例项目（another example）中所示的设置不起作用。

通过一些设置，我可以运行简单的测试，但如果我尝试导入组件，我会收到错误：

  ● 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"
      ]}

有人能指出一个有效的例子吗？

【问题讨论】：

标签： typescript react-native ts-jest

【解决方案1】：

找到一个可行的示例设置： example with configurations that allow running tests.

我确实留下了 jest.setup.js 文件和行

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

在 jest.config.js 文件中。

【讨论】：