buttonのclickイベントをテストする方法【React Testing Library】

Reactで、buttonをクリックしてonClickイベントを発生させるテストを実装します。

Reactでテストを実行してみよう！React Testing Libraryの使い方

Reactコンポーネントは、JestとReact Testing Libraryを使ってテストを実施できます。Create React Appで作成したコードを参考に、テストを実行してみましょう。構成はReact+TypeScri...

buttonをクリックするテストを実装

使用するメソッド

buttonをクリックするには、次の２つのメソッドが使えます。

userEvent.click(element)
fireEvent.click(element)

userEventの方が、よりブラウザに近い処理を行います。特別な理由がない限り、userEventを使用しましょう。詳細については、こちらのページを参照してください。

テスト対象のコード

import React, { useState } from 'react';
import './App.css';

export const Example = () => {
  const [count, setCount] = useState<number>(0);

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <p>あなたは {count} 回クリックしました</p>
      <button onClick={handleClick}>クリック</button>
    </div>
  );
};

ボタンをクリックしたらcountの値がインクリメントされて、表示が更新されます。
今回は、初期状態とボタンをクリックした後で、それぞれ表示が更新されてるかテストしてみます。

テストコード

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Example } from './Example';

test('ボタンをクリックするとカウントされる', () => {
  render(<Example />);
  const button = screen.getByRole('button');
  expect(screen.getByText('あなたは 0 回クリックしました')).toBeInTheDocument();
  userEvent.click(button);
  expect(screen.getByText('あなたは 1 回クリックしました')).toBeInTheDocument();
});

初期状態での表示確認と、ボタンをクリックした後に表示が変わることをテストしています。
ひとつひとつ説明します。

const button = screen.getByRole('button');

クリックするHTMLElementのbuttonは、getByRole(‘button)で取得します。
テスト対象のコンポーネントはbuttonはひとつだけなので、ByRoleで大丈夫です。

expect(screen.getByText('あなたは 0 回クリックしました')).toBeInTheDocument();

初期状態で、DOMに’あなたは 0 回クリックしました’というテキストが存在するかチェックしています。countの初期値は0なので、カウントする前は’0回’と表示されます。

userEvent.click(button);
expect(screen.getByText('あなたは 1 回クリックしました')).toBeInTheDocument();

userEvent.clickでbuttonをクリックします。
クリックすると、onClickの処理が走るのでhandleClickが実行されてcountが1つ増えます。

const handleClick = () => {
  setCount((prevCount) => prevCount + 1);
};

結果としてDOMには、’あなたは 1 回クリックしました’というテキストが存在することになります。

まとめ：userEvent.clickを使おう

buttonをクリックするときは、userEvent.clickを使えばOKです。
どんどんuserEvent.clickを使いましょう！
以上。