web-dev-qa-db-ja.com

ReactネイティブでJestを使用する方法

React Nativeのドキュメントの テストセクション は、Jestがユニットテストを行う公式の方法であることを示唆しています。ただし、セットアップ方法については説明していません。セットアップなしでJestを実行すると、Reactネイティブコードが使用する傾向がある変換（ES6機能、JSX、フローなど）が適用されないため、構文エラーが発生します（行番号なし:(））。 React Native source tryには、env.jsとscriptPrerocess.jsを含むjestSupportフォルダーがあり、後者には変換を適用するためのコードがあります。それらを私のプロジェクトにコピーし、次のセクションを私の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ネイティブソースからより多くのエラーが発生しています。これは、Jest内で実行するためのものではないようです。

EDIT2：

react-nativeモジュールのモックを明示的に設定すると機能します。

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

これは非常に手動で行われるようで、React Native APIと相互作用するコードのテストにはあまり役立ちません。まだ何かが足りないような気がします！

react-nativejestjs
20
Thomas Parslow

JestをReactネイティブアプリケーションで動作させました。ES6およびES7トランスフォームを含むファイルで問題なくテストを実行しています。

Jestを機能させるために、私は次の手順に従いました。

  1. jestSupport フォルダーをReactネイティブマスターリポジトリからreact-nativeのnode_modulesフォルダーにコピーしました。

  2. 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"
  ]
},
10
Jonathan Huang

React Native v0.37.0以降、Jestは新しいアプリテンプレートの一部です。

新しいアプリでは、すぐにテストを実行できます。

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

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リポジトリを参照してください。

2
sudo bangbang