単体テスト: Vitest と React Testing Library
テスト 3 層の第 1 層を書きます。Vitest に jsdom の project を足し、React Testing Library と user-event で、ダイアログが開くこと、フォーカスが中へ移って外へ出ないこと、Esc キーと閉じるボタンで閉じることを確かめます。待ってから確かめる箇所と、jsdom では確かめられないことも整理します。
「vitest」タグのついた2記事
全てのタグを見る実ブラウザでテストする: Vitest Browser Mode と Playwright
テスト 3 層の第 3 層を書きます。Vitest Browser Mode で本物のキー入力を送り、フォーカスの閉じ込めと閉じる遷移を確かめます。Playwright でページに組み込んだ状態を通しで確かめ、最後にどの検証をどの層に置くかを表にまとめます。