Zenn
Open4

react-testingについての雑多メモ

React
TypeScript
Test
masakimasaki

各Libraryの役割 (概要)

  • Jest

    • テストランナー, 評価式ライブラリ, モックライブラリ
    • テストを作成するための関数 (describe, test, ...etc) の提供
    • 各テストを評価する評価式 (Matcher) の提供
    • mock作成時にも使用
    • この子がいないと始まらない

  • jest-dom

    • DOM要素の評価を簡単に行えるcustomMatchrの提供をしてくれる
    • Jestを拡張するライブラリ

  • react-testing-library

    • Kent C. Dodds氏により作成されたtest用のlibrary
    • react公式でもテストへの仕様が推奨されている
    • コンポーネントのclick, type, dragと言った、実際のユーザー操作に近い操作が再現可能
    • 内部事情に触れることなくコンポーネントの振る舞いをテストできる
      • 実装の詳細 (後述)に触れづらい
    • 最新のreact 18にも対応可。アップデート頻度が高いので基本はこちらを使えばOK

  • user-event

    • よりユーザーの操作に近い操作が再現できるツール
    • react-testing-libraryの拡張ライブラリ

  • react-hooks-testing-library

    • hooks, customHooksのテストに使用
    • 本来hooksはコンポーネント内でしか呼べないが、こちらのツールを利用すると、hooksを直接呼ぶことができる (便利)
masakimasaki

コンポーネントテスト作成の基本的な流れ

結論： AAAを意識する

  • AAAとは？
    • テストコードの基本ステップ
    • Arrange、Act、Assert (準備、実行、評価)
import React from "react"
import { render } from "@testing-library/react"
import userEvent from "@testing-library/user-event";

test("SomeComponentをクリックすると色が赤色に変わる", () => {
// Arrange: 準備 (SomeComponentの準備)
  const { getByTestId } = render(<SomeComponent />) // SomeComponentの描画
  const someDom = getByTestId("someComponent-testId") // SomeComponentの要素を取得
  
// Act: 実行 (SomeComponentのクリック)
  userEvent.click(someDom)

// Assert: 評価 (SomeComponentのstyle変化の検証)
  expect(someDom).toHaveStyle({
  backgroundColor: 'red',
})
})