LESSON 11 · 約40分

使いやすさとテストで、動作を確かめる

意味のあるHTML、キーボード、利用者の操作に近いテストで品質を確認します。

コードを試す前に

01のVite reactテンプレート（JavaScript/JSX）を使います。特記のないApp.jsxは、そのレッスンだけで動く独立した例です。例同士を連結しないでください。

短い学習用の例です。各App.jsxは独立した例で、順に追記して一つの完成品にする形式ではありません。ファイル名、依存関係、未定義部分の前提は注記に記載します。問題内の抜粋や空欄は、そのまま実行するための完成コードではありません。

開発環境の準備を確認する →

このレッスンでわかること

ラベル・ボタン・状態表示を意味に合わせて使える
操作結果を確かめる小さな自動テストを書ける

まず標準のHTMLを使う

クリックできるdivよりbutton、移動はa、入力はlabel付きinputを選びます。標準の要素はキーボード操作や役割を持っています。色だけで完了や失敗を伝えず、文字も添えます。フォーカスの枠をむやみに消さず、狭い画面や拡大表示も確認します。

内部変数より、利用者が見る結果

「stateが1になる」だけでなく、「増やすを押すと1回と読める」ことをテストします。Testing Libraryではroleと名前で要素を探すと、実際に何の操作かが明確になります。非同期の利用者操作はawaitし、Reactの更新が反映された後で結果を検証します。

手動と自動を組み合わせる

以下はVite環境にVitest・jsdom・React Testing Library・user-eventを入れて実行する独立した例です。テストが通っても、読みやすさやすべてのアクセシビリティが保証されるわけではありません。キーボードのみ、エラー表示、0件、再読み込み、本番ビルドも確かめます。

追加依存: npm install -D vitest jsdom @testing-library/react @testing-library/dom @testing-library/user-event
実行: npx vitest run
ビルド確認: npm run build。成功は全動作の正しさの保証ではない

テスト対象のカウンター

src/App.jsx

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <main>
      <h1>練習回数</h1>
      <p role="status">{count}回</p>
      <button type="button" onClick={() => setCount(n => n + 1)}>増やす</button>
    </main>
  );
}

このレッスン用にApp.jsxを置き換えます。下のテストとセットで使います。

操作から表示を検証する

src/App.test.jsx

// @vitest-environment jsdom
import { afterEach, expect, test } from 'vitest';
import { cleanup, render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './App.jsx';

afterEach(cleanup);

test('増やすボタンで表示が1回になる', async () => {
  const user = userEvent.setup();
  render(<App />);
  expect(screen.getByRole('status').textContent).toBe('0回');
  await user.click(screen.getByRole('button', { name: '増やす' }));
  expect(screen.getByRole('status').textContent).toBe('1回');
});

ファイル先頭のコメントでDOMテスト環境を指定します。独自のjest-dom matcherは使わないため、その追加設定は不要です。

TRY IT YOURSELF

操作をテストで確かめる

上記の依存を学習用プロジェクトへ追加し、テストを実行する
ボタンのstate更新を一時的に削除し、テストが失敗することを確認して戻す
2回クリックして2回になるテストを追加する
Tabでボタンへ移り、EnterとSpaceで操作できるか手動確認する
npm run buildを実行する

できたらOK：成功するだけでなく意図的な不具合で失敗するテストがあり、キーボードから同じ操作ができる

QUICK CHECK

理解を確かめよう

公式資料でもう少し詳しく

ここまで読めたら、ひとつ前進。