Skip to main content

20 docs tagged with "testing"

View all tags

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

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

TDD 実践ガイド

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

Testing Strategy — The Test Pyramid and Layered Testing

Explains the testing strategy for a DDD architecture. Covers the idea of the test pyramid (Unit / Integration / Feature), the benefit of testing the domain layer fast without a DB, minimal use of mocks, Arrange-Act-Assert, descriptive test method names, and the test data builder pattern.

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

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

単体テスト: 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 でページに組み込んだ状態を通しで確かめ、最後にどの検証をどの層に置くかを表にまとめます。