react-native - 如何在 React Native 中使用 Jest

Question

React Native 文档的 testing section 表明 Jest 是进行单元测试的官方方式。但是，他们没有解释如何设置它。在没有任何设置的情况下运行 Jest 会出现语法错误(没有行号 :( )，因为它不应用 React Native 代码倾向于使用的转换(例如 ES6 特性、JSX 和 Flow)。React Native 源代码中有一个 jestSupport 文件夹尝试包含 env.js 和 scriptPrerocess.js ，后者具有应用转换的代码。所以我将它们复制到我的项目中，并将以下部分添加到我的 package.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 理解 React Native，我还需要做更多的事情吗？是否有任何用于测试 React Native 的 Jest 设置示例？

编辑:

在 scriptPreprocess 中有一个检查，阻止它在 node_modules 中的任何文件上运行，其中当然包括整个 React Native。删除它可以修复上述错误。但是，我现在从 React Native 源代码中得到了更多的错误，看起来它绝对不是要在 Jest 中运行。

EDIT2:

为 react-native 模块显式设置模拟有效:

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

这似乎将是非常手动的，并且对于测试与 React Native API 交互很多的代码不是很有用。我肯定还是觉得我错过了什么!

Answer 1

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

为了让 Jest 工作，我按照以下步骤操作:

已复制 jestSupport 从 React Native 主存储库到我的 react-native 的文件夹node_modules 中的文件夹.

编辑了我的 packages.json 中的“jest”行指向 jestSupport 中的文件文件夹

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