如何在 React Native 中使用 Jest

Question

React Native 文档的 testing section 建议 Jest 是进行单元测试的官方方式。但是，他们没有解释如何设置它。运行没有任何设置的 Jest 会给出语法错误（没有行号 :( ) 因为它没有应用 React Native 代码倾向于使用的转换（例如 ES6 功能、JSX 和 Flow）。有一个 jestSupport React Native 源代码中的文件夹尝试包含 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，我还需要做些什么吗？是否有 Jest 设置示例来测试 React Native？

编辑：

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

编辑2：

显式设置 react-native 模块的 mock 有效：

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

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

Answer 1

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

为了让 Jest 工作，我遵循了以下步骤：

已将 React Native 主存储库中的 jestSupport 文件夹复制到 node_modules 中我的 react-native 文件夹。
编辑 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"
  ]
},

Answer 2

对于 jest 的较新版本，为 react-native 设置它非常简单。

使用

安装 jest

npm install --save-dev jest-cli babel-jest

在package.json中添加这个

"scripts": {
  "start": "babel-node ./server/server.js",
  "import-data": "babel-node ./scripts/import-data-from-parse.js",
  "update-schema": "babel-node ./server/schema/updateSchema.js",
  "test": "jest",
  "lint": "eslint ."
},
"jest": {
  "haste": {
    "defaultPlatform": "ios",
    "platforms": [
      "ios",
      "android"
    ],
    "providesModuleNodeModules": [
      "react-native"
    ]
  }
},

您可能只需要添加与笑话相关的行

现在您可以使用

npm test

到运行开玩笑。

请参阅 f8app 的 github 存储库以了解更多相关信息。

Answer 3

从 React Native v0.37.0 开始，Jest 是新应用模板的一部分。

在新应用中，您可以立即运行测试：

$ react-native init MyAwesomeApp
$ cd MyAwesomeApp
$ npm test
...
Tests:       2 passed

如何在 React Native 中使用 Jest

How to use Jest with React Native

jestjs

react-native