如何使用Jact与React Native

Question

React Native文档的测试部分表明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中运行.

EDIT2:

明确设置react-native模块的模拟工作:

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

这似乎是非常手动的,对于测试与React Native API交互的代码非常有用.我当然还是觉得我错过了什么!

Answer 1

我让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"
  ]
},

Answer 2

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

在新的应用程序中,您可以立即运行测试:

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