react-native - 如何将Jest与React Native一起使用

React Native文档的testing section表示Jest是进行单元测试的官方方法。但是，他们没有解释如何进行设置。在没有任何设置的情况下运行Jest会产生语法错误(没有行号:()，因为它没有应用React Native代码倾向于使用的转换(例如ES6功能，JSX和Flow)。ReactNative源代码中有一个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中运行它。

编辑2:

显式设置react-native模块的模拟程序有效:

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

看起来这将是非常手动的操作，对于测试与React Native API大量交互的代码不是很有用。我绝对仍然感觉自己缺少什么!

最佳答案

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

为了使Jest工作，我遵循以下步骤:

从React Native主存储库中将 jestSupport 文件夹复制到了react-native中的node_modules文件夹中。

编辑了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"
  ]
},

关于react-native - 如何将Jest与React Native一起使用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29730415/