20

React Native 文档的测试部分建议 Jest 是进行单元测试的官方方式。但是，他们没有解释如何设置它。在没有任何设置的情况下运行 Jest 会出现语法错误（没有行号 :( ），因为它没有应用 React Native 代码倾向于使用的转换（例如 ES6 功能、JSX 和 Flow）。React Native 源代码中有一个jestSupport文件夹尝试包含一个env.jsand 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 中运行。

编辑2：

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

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

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

4

3 回答 3

10

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

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

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

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

我现在的“开玩笑”行packages.json看起来像这样：

"jest": {
  "scriptPreprocessor": "<rootDir>/node_modules/react-native/jestSupport/scriptPreprocess.js",
  "setupEnvScriptFile": "<rootDir>/node_modules/react-native/jestSupport/env.js",
  "testFileExtensions": [
    "js"
  ],
  "unmockedModulePathPatterns": [
    "source-map"
  ]
},
于 2015-05-17T05:05:14.023 回答
5

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

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

$ react-native init MyAwesomeApp
$ cd MyAwesomeApp
$ npm test
...
Tests:       2 passed
于 2016-11-11T19:12:04.683 回答
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"
    ]
  }
},

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

现在你可以使用

npm test

开玩笑。

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

于 2016-04-22T11:57:51.410 回答