跳转到主要内容
版本:26.倍

反应当地アプリをテスト

Facebookでは,Jestを使用して<一个href="https://reactnative.dev/" target="_blank" rel="noopener noreferrer">反应本地アプリケーションをテストします。

動く反应本地アプリケーションのテストに関するより深い知見は以下のシリーズを読むことで得てください:<一个href="https://callstack.com/blog/testing-react-native-with-the-new-jest-part-1-snapshots-come-into-play/" target="_blank" rel="noopener noreferrer">第1部分:Jest - Snapshot开始发挥作用、<一个href="https://callstack.com/blog/testing-react-native-with-the-new-jest-part-2-redux-snapshots-for-your-actions-and-reducers/" target="_blank" rel="noopener noreferrer">第2部分:笑话-为你的动作和减少器还原快照

セットアップ<一个类="hash-link" href="#セットアップ" title="#">#

0.38 react-nativeよりreact-native initコマンドにJestセットアップがデフォルトで含まれています。以下の設定が自動的に包。jsonファイルに追加されます。

{
“脚本” : {
“测试” : “开玩笑”
} ,
“开玩笑” : {
“预设” : “react-native”
}
}

注意:もしあなたがreact-nativeアプリケーションをアップグレードする際にjest-react-nativeプリセットを利用していた場合はその依存をpackage.jsonから削除し,プリセットをreact-nativeに変更してください。

纱线测试を実行するだけで,Jestでテストを実行できます。

スナップショットテスト<一个类="hash-link" href="#スナップショットテスト" title="#">#

さあ<一个href="//www.ieatrice.com/ja/docs/snapshot-testing">スナップショットテストをいくつかのビューとテキストコンポーネントをもつサンプルコンポーネントに対して作りましょう。

/ / Intro.js
进口 反应 , { 组件 } “反应” ;
进口 { 样式表 , 文本 , 视图 } “react-native” ;
介绍 扩展 组件 {
渲染 ( ) {
返回 (
< 视图 风格 = { 风格 容器 } >
< 文本 风格 = { 风格 欢迎 } > 欢迎 反应 本地的 ! 文本 >
< 文本 风格 = { 风格 指令 } >
一个 反应 本地的 快照测试
文本 >
视图 >
) ;
}
}
常量 风格 = 样式表 创建 ( {
容器 : {
alignItems : “中心” ,
写成backgroundColor : “# F5FCFF” ,
flex : 1 ,
justifyContent : “中心” ,
} ,
指令 : {
颜色 : # 333333的 ,
marginBottom : 5 ,
textAlign : “中心” ,
} ,
欢迎 : {
字形大小 : 20. ,
保证金 : 10 ,
textAlign : “中心” ,
} ,
} ) ;
出口 默认的 介绍 ;

コンポーネントとのやり取りとレンダリングされた出力をキャプチャしてスナップショットファイルを作成するために,反应のテストレンダラーとJestのスナップショット機能を利用しましょう:

/ / __tests__ / Intro-test.js
进口 反应 “反应” ;
进口 渲染器 “react-test-renderer” ;
进口 介绍 “. . /介绍” ;
测试 ( 显示正确的 , ( ) = > {
常量 = 渲染器 创建 ( < 介绍 /> ) toJSON ( ) ;
预计 ( ) toMatchSnapshot ( ) ;
} ) ;

纱线测试または开玩笑を実行すると,このようなファイルが出力されます:

/ / __tests__ / __snapshots__ / Intro-test.js.snap
出口 ( 介绍正确渲染1 ] =
<视图
风格= {
对象{
“alignItems”:“中心”,
“写成backgroundColor”:“# F5FCFF”,
“弯曲”:1、
“justifyContent”:“中心”,
}
}>
<文本
风格= {
对象{
“字形大小”:20,
“保证金”:10
“textAlign”:“中心”,
}
}>
欢迎来到React Native!
< /文本>
<文本
风格= {
对象{
“颜色”:“333333 #”,
“marginBottom”:5
“textAlign”:“中心”,
}
}>
这是一个React原生快照测试。
< /文本>
< /视图>
;

次回のテストでは,レンダリングされた出力は前に作成されたスナップショットと比較されます。快照应该与代码更改一起提交。スナップショットテストが失敗した場合,それが意図的な変更かどうかを点検する必要があります。変更が予想されたものであればjest - uコマンドでJestを実行して既存のスナップショットを上書きします。

この例のコードは<一个href="https://github.com/facebook/jest/tree/master/examples/react-native" target="_blank" rel="noopener noreferrer">例子/ react-nativeで参照できます。

プリセット設定<一个类="hash-link" href="#プリセット設定" title="#">#

プリセットは環境をセットアップしますが,それはとても偏っておりFacebookにおいて有用であるとわかったものをベースにしています。ただ,すべての設定値は上書き可能でプリセットを使ってない場合でもそれに合わせて設定することができます。

環境<一个类="hash-link" href="#環境" title="#">#

react-nativeはJestプリセットとともに提供されているので,package.jsonjest.presetフィールドにはreact-nativeが指定されているべきです。プリセットは节点環境であり反应本地アプリケーション環境を模倣します。そのため一切のDOMやブラウザAPIをロードしないため,Jestの起動時間を大きく向上させます。

transformIgnorePatternsのカスタム<一个类="hash-link" href="#transformignorepatterns-のカスタム" title="#">#

的<一个href="//www.ieatrice.com/ja/docs/configuration">transformIgnorePatterns选项可以用来指定哪些文件应该被Babel转换。残念なことに多くのreact-native npmモジュールは公開前にソースコードをコンパイルしていません。

デフォルトではjest-react-nativeプリセットは自身のプロジェクトのソースファイルとreact-nativeのみ処理します。如果你有需要转换的npm依赖项,你可以通过包括react-native之外的模块来自定义这个配置选项:

{
“transformIgnorePatterns” : (
“node_modules / (? ! (react-native |我的项目| react-native-button) /)”
]
}

setupFiles<一个类="hash-link" href="#setupfiles" title="#">#

もしあなたが各テストファイルに対して追加設定を行いたい場合は,<一个href="//www.ieatrice.com/ja/docs/configuration">setupFiles設定値を使ってセットアップスクリプトを指定することが利用できます。

moduleNameMapper<一个类="hash-link" href="#modulenamemapper" title="#">#

moduleNameMapperを使うとあるモジュールのパスを別のモジュールにマップすることができます。デフォルトではプリセットはすべてのイメージをイメージスタブモジュールにマップしていますがもしモジュールが見つからない場合はこの設定値が役立つかもしれません。

{
“moduleNameMapper” : {
“my-module.js” : “< rootDir > /路径/ / my-module.js”
}
}

提示<一个类="hash-link" href="#tips" title="#">#

笑话。模拟を使ってネイティブモジュールをモックする<一个类="hash-link" href="#jestmock-を使ってネイティブモジュールをモックする" title="#">#

react-nativeに組み込まれているJestプリセットはいくつかのデフォルトモックを持っており,それらはreact-nativeレポジトリにも適用されています。然而,一些react-native组件或第三方组件依赖于本地代码进行渲染。そのような場合には,Jestのマニュアルモックシステムを使って内部の実装部分をモックすることで問題を回避できる可能性があります。

例えば,もしあなたのコードがreact-native-videoという名前のビデオコンポーネントに依存していた場合,あなたはそれをモック関数で置き換えたくなるかもしれません。

开玩笑 模拟 ( “react-native-video” , ( ) = > “视频” ) ;

これはコンポーネントをそのコンポーネントのすべての道具とともに<视频{…道具}/ >としてスナップショット出力の中で描画します。酶と反应16<一个href="//www.ieatrice.com/ja/docs/tutorial-react">についての注意事項も参照してください

ときにより複雑なマニュアルモックを必要とする場合もあるでしょう。例えば,もしあなたがネイティブコンポーネントの道具类型もしくは静的フィールドをモックに渡したい場合に,jest-react-nativeのヘルパーを使って別の反应モックコンポーネントを返すことができます。

开玩笑 模拟 ( “路径/ / MyNativeComponent” , ( ) = > {
常量 mockComponent = 需要 ( “react-native /嘲笑/ mockComponent” ) ;
返回 mockComponent ( “路径/ / MyNativeComponent” ) ;
} ) ;

もしくは,あなたがマニュアルモックを作りたい場合は以下のようにして作ることができます。

开玩笑 模拟 ( “文本” , ( ) = > {
常量 RealComponent = 开玩笑 requireActual ( “文本” ) ;
常量 反应 = 需要 ( “反应” ) ;
文本 扩展 反应 组件 {
渲染 ( ) {
返回 反应 createElement ( “文本” , 道具 , 道具 孩子们 ) ;
}
}
文本 proptype = RealComponent proptype ;
返回 文本 ;
} ) ;

別のケースとして,反应コンポーネントでないネイティブモジュールをモックしたいケースがあります。そのケースでも同じテクニックが使えます。ネイティブモジュールのソースコードをよく調べて,実デバイス上でアプリを実際に動かしながらモジュールのログを取って,マニュアルモックを設計することをおすすめします。

もしあなたが同じモジュールを何度もモックすることになったら,そのモックは別ファイルに定義してそれをsetupFilesリストに追加することをおすすめします。