如何在 React Native 中使用 Jest [英] How to use Jest with React Native

问题描述

React Native 文档的 测试部分 表明 Jest 是进行单元测试的官方方法.但是，他们没有解释如何设置它.在没有任何设置的情况下运行 Jest 会出现语法错误(没有行号:()，因为它不应用 React Native 代码倾向于使用的转换(例如 ES6 特性、JSX 和 Flow).有一个 jestSupport 包含 env.js 和 scriptPrerocess.js 的 React Native 源文件中的文件夹，后者具有应用转换的代码.所以我将它们复制到我的项目并将以下部分添加到我的 package.json 中:

The testing section of the docs for React Native suggest that Jest is the official way to do unit tests. However, they don't explain how to get it setup. Running Jest without any setup gives syntax errors (with no line numbers :( ) because it doesn't apply the transforms (eg ES6 features, JSX and Flow) that React Native code tends to use. There's a jestSupport folder in the React Native source try that contains a env.js and scriptPrerocess.js, the latter has code for apply the transforms. So I've copied those into my project and added the following section to my package.json:

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

这修复了第一个错误，但我仍然收到以下错误:

This fixes the first error but I still get the following error:

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?是否有任何 Jest 设置示例来测试 React Native?

Is there more I need to do to make Jest understand React Native? Are there any examples of Jest setup to test React Native?

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

There was a check in scriptPreprocess that stopped it from running over any file in node_modules which of course included the whole of React Native. Removing that fixes the error above. However, I'm now getting more errors from the React Native source, it definitely seems like it isn't meant to be run within Jest.

显式设置 react-native 模块的模拟工作:

Explicitly setting the mock for the react-native module works:

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

这似乎是非常手动的，对于测试与 React Native API 交互很多的代码不是很有用.我仍然觉得我错过了什么！

That seems like it's going to be very manual and not very useful for testing code that interacts with the React Native API a lot. I definitely still feel like I'm missing something!

推荐答案

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

I got Jest to work for my React Native application, and it is running tests without any problem on files with ES6 and ES7 transforms.

为了让 Jest 发挥作用，我遵循了以下步骤:

To get Jest to work, I followed these steps:

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

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

Edited the "jest" line in my packages.json to points to the files in the jestSupport folder

我的 packages.json 中的jest"行现在看起来像这样:

The "jest" line in my packages.json now looks lke this:

"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 中使用 Jest的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！