Reactのテスト
>React コンポーネントは他の JavaScript のコードと同じようにテストできます。
>React コンポーネントのための一般的なテストのパターン集です。
React製のアプリをJestでテストする方法の良い解説
jest.spyOn docメソッドをモックに置き換える
実装が与えられなかった時、デフォルトで元の実装を使う
実装の与え方
jest.spyOn(object, methodName).mockImplementation(() => customImplementation) 元の実装を使うモックに何の意味があるか？
そのモックがどんな引数で呼ばれたか、どんな値を返したか、例外を投げたか、などが観察可能になる doc
「メソッド」と呼ばれてるが、クラスのメソッドには限らない、モジュールのトップレベル関数を書き換えるときはモジュールに名前をつけてインポートすれば良い
import * as fooModule from './foo'; setter / getter もスパイできる doc
jest.mock でモジュールを丸ごとモックに置き換えることもできる docイベントを投げるときはバブルが必要
タイマーを使う処理はタイマーをモックする
スナップショットテスト doc
スナップショットを取ってくれて、それと相違してるかチェックしてくれる
別ファイルに保存するものと、テストコード中に埋め込むものがある
DOMに限らない
意図的な変更によってスナップショットと一致しなくなったときは
jest --updateSnapshot 例えば生成日時などのスナップショットごとに変化する値は、第一引数
propertyMatchers でフィルタする doc mockFn.mockImplementationOnce doc一回だけ実装を差し替える
ユーザが実際に使う状態に近いテストをする
→ユーザはDOMのラベルを見てボタンを押す
Enzymeの後継
>このドキュメントではあなたの環境に影響する要素や、いくつかのシナリオにおける推奨事項について概説します。
Related Pages
- →マルチエージェント協調×React×agentic_retrieval-augmented_generation:_a_survey_on_agentic_rag×retrieval-augmented_generation×rag→
- →server-side_rendering×ssr×cgi×ruby_on_rails×django×React×vue.js×シングルページアプリケーション×spa×open_graph_protocol×isr×ssg→
- →regroup×pregroup-done-2019×2020 年、 React 軸で学ぶべき技術×TypeScript×React×webpack×visual_studio_code×styled-components×ReactModal×ipadはfocusを無視することがある×paper.js×パスドロー×パスの形がおかしい×付箋・パスの投げ縄選択×firestore×websocket×amazon_s3×netlify×apple_pencil×ipad上でのダイレクトタッチとpencilタッチの区別×二本指ジェスチャでズームと平行移動×redux×reactn×undoの実装×キャンバス汚染×キャンバス汚染解決編×cssで条件分岐と変数と計算を使う×100vhだと縦にはみ出す×メニューアイコンがiphoneなどの狭い画面ではみ出す×ズームアウトした状態でペンで描くとガタガタになる×線の太さを一定にする×paper.jsの更新後に呼ばれるコールバックをつける×バルーンメニュー×投げ縄選択→削除×付箋の自動フォントサイズ調整×gが下に突き出す×okr問題×regroup2019→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]