反应本土 – 如何使用Jest与React Native

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？有没有Jest设置的例子来测试React Native？

编辑：

在scriptPreprocess中有一个检查,阻止它在node_modules中的任何文件上运行,当然这包括了React Native.删除它修复了上面的错误.然而,我现在从React Native源代码获得更多的错误,这绝对似乎并不意味着在Jest中运行.

EDIT2：

明确设置反应原生模块的模拟工作：

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

这似乎是非常手动的,并且测试与React Native API进行交互的代码不是很有用.我肯定还是觉得我错过了一些东西！

我有Jest为我的React Native应用程序工作,它运行测试没有任何问题的文件与ES6和ES7转换.

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

>将React Native主库中的jestSupport文件夹复制到node_modules中的我的反应本机文件夹.
>编辑我的package.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"
  ]
},

反应本土 – 如何使用Jest与React Native

相关文章