メインコンテンツまでスキップ

「testing」タグのついた20記事

全てのタグを見る

Storybook でテストする: play 関数と Chromatic

テスト 3 層の第 2 層を書きます。story に play 関数を足して開閉の操作を検証し、Vitest アドオンで実ブラウザの上で実行します。a11y の違反をテストの失敗にする設定と、Chromatic で見た目の差分を検知する流れも扱います。

TDD 実践ガイド

テストを先に書くと設計がどう変わるかを、PHP と React の両方で追う全 14 章のガイド。Red-Green-Refactor のサイクル、テストダブルの 5 分類、テストが書きにくいコードの直し方から、レガシーコードへの後付けと TDD が効かない場面までを扱います。

テストダブル: Meszaros の 5 分類

Dummy・Stub・Spy・Mock・Fake の違いを、同じ 1 つの題材で依存を 5 通りに差し替えることで見ます。手書きのダブルを既定にし、ツールは近道として後に置きます。

テスト戦略: テストピラミッドと層別テスト

DDD アーキテクチャのテスト戦略を解説。テストピラミッド (Unit / Integration / Feature) の考え方、ドメイン層を DB なしで高速にテストする利点、モックの最小限利用、Arrange-Act-Assert、日本語テストメソッド名、テストデータビルダーパターンをまとめます。

単体テスト: Vitest と React Testing Library

テスト 3 層の第 1 層を書きます。Vitest に jsdom の project を足し、React Testing Library と user-event で、ダイアログが開くこと、フォーカスが中へ移って外へ出ないこと、Esc キーと閉じるボタンで閉じることを確かめます。待ってから確かめる箇所と、jsdom では確かめられないことも整理します。

実ブラウザでテストする: Vitest Browser Mode と Playwright

テスト 3 層の第 3 層を書きます。Vitest Browser Mode で本物のキー入力を送り、フォーカスの閉じ込めと閉じる遷移を確かめます。Playwright でページに組み込んだ状態を通しで確かめ、最後にどの検証をどの層に置くかを表にまとめます。