React Native的testing section个文档表明Jest是进行单元测试的官方方式.然而,他们没有解释如何设置.在没有任何设置的情况下运行Jest会产生语法错误(没有行号:()),因为它没有应用本机代码通常使用的转换(例如ES6功能、JSX和流).React原生源代码try中有一个jestSupport文件夹,其中包含env.jsscriptPrerocess.js,后者包含应用转换的代码.因此,我将这些内容复制到我的项目中,并将以下部分添加到我的包中.json:

  "jest": {
    "scriptPreprocessor": "jestSupport/scriptPreprocess.js",
    "setupEnvScriptFile": "jestSupport/env.js"
  },

这修复了第一个错误,但仍然出现以下错误:

Using Jest CLI v0.4.0
 FAIL  js/sync/__tests__/SynchronisedStorage-tests.js
SyntaxError: /Users/tom/my-project/js/sync/__tests__/SynchronisedStorage-tests.js: /Users/tom/my-project/js/sync/SynchronisedStorage.js: /Users/tom/my-project/node_modules/react-native/Libraries/react-native/react-native.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/browser/ui/React.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/utils/ReactChildren.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/addons/ReactFragment.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/classic/element/ReactElement.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/core/ReactContext.js: /Users/tom/my-project/node_modules/react-native/node_modules/react-tools/src/vendor/core/warning.js: Unexpected token .
1 test failed, 0 tests passed (1 total)
Run time: 0.456s

我还需要做更多的事情来让jest变得更自然吗?有没有Jest设置的例子来测试React Native?

EDIT:

有一个签入scriptPreprocess阻止它在node_modules中的任何文件上运行,其中当然包括整个React Native.删除它修复了上述错误.然而,我现在从React原生源代码中得到了更多错误,这显然似乎不是为了Jest .

EDIT2:

明确设置react-native模块的模拟功能:

jest.setMock('react-native', {});

这似乎是非常手动的,对于测试经常与React原生API交互的代码来说不是很有用.我肯定还是觉得我错过了什么!

推荐答案

我让Jest为我的React原生应用程序工作,它在使用ES6和ES7转换的文件上运行测试,没有任何问题.

为了让jest发挥作用,我遵循以下步骤:

  1. jestSupport文件夹从React Native master repo复制到node_modules中的我的react-native文件夹.

  2. 编辑my packages.json中的"jest"行,指向jestSupport文件夹中的文件

my packages.json中的"jest"一词现在看起来是这样的:

"jest": {
  "scriptPreprocessor": "<rootDir>/node_modules/react-native/jestSupport/scriptPreprocess.js",
  "setupEnvScriptFile": "<rootDir>/node_modules/react-native/jestSupport/env.js",
  "testFileExtensions": [
    "js"
  ],
  "unmockedModulePathPatterns": [
    "source-map"
  ]
},

React-native相关问答推荐

没有给出相同价值观的时刻

ios 中节列表中的scrollToLocation 不起作用.在 Android 上,列表滚动回索引 0,但在 ios 上不会发生同样的情况

如何防止 VS Code 从react-native-web自动导入?

我应该什么时候调用 realm.close()?

ReactNative:在所有组件和操作之间共享 sqlite 实例的最佳方法

如何在 React Native 中正确地将组件导入到我的导航器中?

react-native (expo)加载markdown 文件

如何使用 AND/OR 运算符过滤列表/查询 AWS Amplify JavaScript GraphQL

React-Native:显示加载屏幕直到加载 webview

cmd : react-native run-android 在每次文件更改时

在react native 中出现Cannot read property 'pick算法rithm' of null错误

自定义标签栏react Navigation 5

无法判断模块react-native-maps:找不到名称为 default的配置

react-native Bottom Up drawer

键盘上方的 React Native 完成按钮

React Native Bullet Character? or Unicode?

React Navigation 中的选项卡导航器图标

居中图像 React Native 加载屏幕

WebStorm + ReactNative?

如何在 Android 手机上运行 React Native 应用程序