現在、React Native コンポーネントをテストするための推奨される方法は、モカ、react-native-mock、および酵素の組み合わせを使用してコンポーネントを浅くレンダリングすることです。
問題は、浅いレンダリングが 1 レベルの深さしかないことです。また、コンポーネントにネストされたビューが含まれている場合があり、追加のレベルを 1 つまたは 2 つテストする必要があります。
理論的には、酵素はmount()コンポーネントを完全にレンダリングすることをサポートしていますが、実際には、react-native-mock のViewモックが children に再帰しないため、これは失敗します。
これらの制限に照らして、人々はコンポーネントを 1 つのレンダー レベルよりも深くどのようにテストしているのでしょうか?
mount()React Native コンポーネントを完全にレンダリングするために酵素を使用するという問題を解決しました。これについては、 https://blog.joinroot.com/mounting-react-native-components-with-enzyme-and-jsdom/で書きました。
私たちの fork を使用react-native-mock-renderして jsdom をセットアップすると、コンポーネントをマウントできるようになります。
コンポーネント テストを mocha から jest に切り替えて、スナップショット テストの次の手順に従うことで、これを解決できました: https://facebook.github.io/jest/docs/tutorial-react-native.html
次に、package.json の既存のテスト ターゲットに jest を追加しました。
"test": mocha … && jest"
注意すべきことの 1 つは、箱から出してすぐにモックされると予想されるもの (例: ) のモックを追加するための指示に従わなければならなかったことと、そうでないネイティブ コンポーネントをマップするためTextInputに使用する必要があったことです。moduleNameMapper適切に解決します。