こんにちは！Reactの世界へようこそ。
フロントエンドの荒波を乗り越えてきたチーフアーキテクトとして、今日は皆さんが必ずぶつかる「テスト」の壁、その中でも特に大事な「ユーザーになりきるための魔法」についてお話しします。
Reactを学び始めると、コンポーネントを作って画面に表示して…と楽しくなってきますよね。でも、いざ「ちゃんと動くか確認しよう！」と思ったとき、テストコードの書き方に悩んだことはありませんか？
今日は、`fireEvent`という「少し不器用な道具」から、`@testing-library/user-event`という「まるで人間のような振る舞いができる魔法の道具」へアップグレードする方法を、一緒に紐解いていきましょう。
—
なぜ「人間」みたいに操作する必要があるの？
まず、身近な例え話をしましょう。
例えば、あなたが街のパン屋さんで「トングを使ってパンをトレーに乗せる」様子を想像してください。
- `fireEvent`の場合：
機械的なロボットアームが「パンの座標を特定！クリック！」と実行します。でも、ロボットは「パンを掴む前に、トングを開く」という細かい動作をスキップしちゃうかもしれません。結果、パンが床に落ちる（＝アプリが想定外の動きをする）ことも。
- `user-event`の場合：
熟練の店員さんが、丁寧にトングを開き、パンを優しく掴んで乗せます。「マウスを動かして、クリックして、指を離す」という一連の流れをしっかり再現してくれるんです。
Reactのテストも同じです。「ボタンをクリックした」という結果だけではなく、「マウスをボタンの上に持っていき、押して、離す」という一連のプロセスを再現することで、より本番環境に近い安心感が手に入るんです。
—
実際に書いてみよう：ログインフォームのテスト
初心者の方が一番つまずきやすい「入力してボタンを押す」という動作を、`user-event`を使って書いてみましょう。
まずは、準備運動です。テストファイルの中に、こんな風に書いてみてください。
import { render, screen } from ‘@testing-library/react’;
import userEvent from ‘@testing-library/user-event’;
import LoginForm from ‘./LoginForm’; // あなたが作ったコンポーネント
test(‘ユーザーが名前を入力してログインボタンを押せるか確認’, async () => {
// 1. ユーザーの操作をシミュレーションする「手」を作ります
const user = userEvent.setup();
// 2. コンポーネントを表示します
render(
// 3. 入力欄を探します
const input = screen.getByLabelText(/名前/i);
const button = screen.getByRole(‘button’, { name: /ログイン/i });
// 4. 「人間らしい」操作を実行！
// typeメソッドは、一文字ずつキーボードを叩く挙動を再現します
await user.type(input, ‘React初心者’);
// 5. ボタンをクリック！
await user.click(button);
// 6. ちゃんと動いたか確認（アサーション）
expect(screen.getByText(/ようこそ！/i)).toBeInTheDocument();
});
ここがポイント！
- `userEvent.setup()`: これが「魔法の杖」を振る準備です。昔はこれが必要なかったのですが、今のReactテストでは「操作する人（ユーザー）」を定義するのがお作法です。
- `await`を忘れずに: `userEvent`の操作は、裏側で少しだけ時間がかかる非同期処理です。`await`を付けることで、「操作が完了するのをちゃんと待つ」という優しい設計になります。
—
よくあるつまずきポイント：大丈夫、みんな最初はこうなんです
「テストが通らない！」と焦るとき、大抵はこんな理由です。
1. 「クリックしたはずなのに反応しない！」
- ボタンが非活性（disabled）になっていませんか？ `user-event`は賢いので、「押せない状態のボタン」をクリックしようとするとエラーを吐いて教えてくれます。これは親切なエラーなんです。
2. `fireEvent`を使い続けてしまう
- `fireEvent`は「即座にイベントを発火」させます。フォーカスが当たっていないのにクリックしたり、入力イベントだけ発生させたりと、現実のブラウザの挙動を無視しがちです。まずは「`user-event`を優先して使う」と決めておくと、テストがグッと安定しますよ。
—
最後に：テストは「コードの保険」です
テストを書くのは、最初は少し面倒に感じるかもしれません。でも、想像してみてください。
「機能を追加したのに、どこかが壊れていないかドキドキしながら画面をポチポチ確認する」のと、「テストを回して『全部OK！』という緑色の表示を見てコーヒーを飲む」のとでは、どちらが心穏やかでしょうか？
`user-event`は、皆さんが書いた大切なReactコードを、どんな変更が加わっても守り抜いてくれる「守護神」です。
まずは、一つのボタンをクリックするところから。少しずつで大丈夫ですから、ぜひ試してみてくださいね。応援しています！
何か分からないことがあったら、いつでもまた聞きに来てください。一緒に悩んで、一緒に解決していきましょう。それでは、素敵なコーディングライフを！
コメント