Question

React Native文档的testing section表明Jest是进行单元测试的官方方式。但是，他们没有解释如何设置它。在没有任何设置的情况下运行Jest会产生语法错误（没有行号:(），因为它没有应用React Native代码倾向于使用的转换（例如ES6功能，JSX和Flow）。有＆＃39; sa {{ 1}} React Native源文件夹中的文件夹包含jestSupport和env.js，后者有应用转换的代码。所以我已将这些复制到我的项目中并添加了以下部分到我的package.json：

scriptPrerocess.js

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

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

我是否还需要做更多才能让Jest了解React Native？是否有任何Jest设置示例来测试React Native？

修改

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中有一个检查阻止它运行scriptPreprocess中的任何文件，当然包括整个React Native。删除它修复了上面的错误。但是，我现在从React Native源获得更多错误，看起来它似乎并不意味着在Jest中运行。

EDIT2：

明确设置node_modules模块的模拟工作：

react-native

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

Answer 1

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

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

将jestSupport文件夹从React Native主仓库复制到react-native中的node_modules文件夹。
编辑了＃34; jest＆＃34;我的packages.json中的行指向jestSupport文件夹

＆＃34; jest＆＃34;我的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"
  ]
},

Answer 2

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

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

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

Answer 3

对于较新版本的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

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

现在你可以使用

<form action="">
  form no:1<br>
  First name:<br>
  <input type="text" name="firstname" value ="">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
  <button type="submit" onclick="">Submit</button>
</form>

运行jest。

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

如何使用Jact与React Native

3 个答案: