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

  • 一回だけ実装を差し替える

• テストユーティリティ – React

  • React Testing Library | Testing Library
    • ユーザが実際に使う状態に近いテストをする
    • →ユーザはDOMのラベルを見てボタンを押す
    • Enzymeの後継
    • Mock Service Worker

• テスト環境

  • このドキュメントではあなたの環境に影響する要素や、いくつかのシナリオにおける推奨事項について概説します。

Reactのテスト