Reactにおける 良いコンポーネントテストとはなにか

Transcript

1. Reactにおける 良いコンポーネントテストとはなにか
2. 自己紹介 ゴリラです。 株式会社テックリードという会社をやってい ます。 主にフロントエンド・バックエンドエンジニ アとして仕事しています。 好物は Vim, Go, Rust, TypeScript, Deno, Wasm などです。 最近はeBPFに興味あります。 YDPN [FOOEFW (JU)VC
3. はじめに • 普段は業務委託でシステム開発のお手伝いしている • ここ2年くらいはVue 2からReact移行の作業をしている • Reactの知見持っている人がほぼいなかったので、チーム内でいろい ろと試行錯誤しながらやってきた • 今日は得られた知見の中で、主にコンポーネントテストについて話 ていく
4. Reactのテストのおさらい
5. Reactにおけるテスト対象 • 関数 • ステートを持たない再利用可能なロジック • 実装によるが基本的に外部への依存がない純粋関数が多い
6. • カスタムフック • ステートと再利用可能なロ ジックを持つ • 外部ストレージやグローバル ステートを参照する場合もあ る • render hooksパターンでUIを 返すこともある Reactにおけるテスト対象
7. • コンポーネント • UI/ステート/ロジックを持つ • ユーザ操作によって状態が変わ り、UIに反映される • 関数とカスタムフックと違って UIがあるためテストが少し複雑 になりやすい Reactにおけるテスト対象
8. 良いコンポーネントテスト とはなにか
9. • 10文字以上入力できない制限を持つNameInputのテスト • 実装: maxLengthの属性で入力文字数の制限をしている 良いコンポーネントテストとはなにか
10. • 問題 • テストが実装詳細に依存している • maxLengthからJSで入力制御に切り替えたときにテスト壊れる 良いコンポーネントテストとはなにか
11. • あるべき姿 • 実装詳細に依存しない、外からみえる振る舞いをテストすべき • 振る舞い = 仕様が変わらない限り、実装を変えても壊れない 良いコンポーネントテストとはなにか
12. • Propsで受け取ったテキストを表示しているかのテスト • 問い: このテストは何を保証しているのか？ 良いコンポーネントテストとはなにか
13. • 問題: Reactの機能をテストしているだけ • `<h1>{title}</h1>`が表示されないことはReactがバグらない限 り、基本的にない 良いコンポーネントテストとはなにか
14. • あるべき姿 • ロジックがあるならテストする • なければテストしない 良いコンポーネントテストとはなにか
15. • data-testid を使って要素を特定してテストしている 良いコンポーネントテストとはなにか
16. • 問題 • 実装詳細(data-testid)に依存している • アクセシビリティを担保しづらい 良いコンポーネントテストとはなにか
17. • あるべき姿 • data-testidは最終手段 • アクセシビリティを意識した実装になる 良いコンポーネントテストとはなにか
18. まとめ
19. • ロジックがあるものをテスト • 透過するだけではReactの仕事 • ユーザーが使える方法で要素を探す • roleで取れる = アクセシビリティを担保&実装詳細に依存しない • ユーザーに見える結果をテスト • 内部実装は変わっても振る舞いは変わらないのでテストが壊れない 良いコンポーネントテストとはなにか
20. ありがとうございました