【React】buttonがdisabledかチェックするテストを実装

Reactで、buttonがdisabledがチェックするテストを実装します。

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

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

disabledかチェックする方法

使用するメソッド

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

toBeDisabled() →「disabledである」かチェックする
toBeEnabled() →「disabledではない」ことをチェックする

expectの引数にbuttonのHTMLElementを指定して、マッチャ関数のtoBeDisabledで「disabledである」かチェックできます。

「disabledではない」ケースは、toBeEnabledでチェックできます。
toBeEnabledはnot.toBeDisabled()と同じ動作になります。

具体例で見ていきましょう。

テスト対象のコード

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

export const Example = () => {
  const [disabled, setDisabled] = useState<boolean>(true);

  const handleChange = () => setDisabled((prevState) => !prevState);
  const handleClick = () => console.log('clicked!');

  return (
    <div>
      <label>
        <input
          name="isGoing"
          type="checkbox"
          checked={disabled}
          onChange={handleChange}
        />
        disabledにする
      </label>
      <br />
      <button disabled={disabled} onClick={handleClick}>
        ボタン
      </button>
    </div>
  );
};

checkboxでbuttonのdisabledを変更できるコンポーネントを作りました。
初期状態ではbuttonはdisabledになっています。
今回は、初期状態とcheckboxをクリックした後で、それぞれdisabledの状態をテストしてみます。

テストコード

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

describe('ボタンがdisabledかチェックする', () => {
  test('初期状態ではボタンは無効の状態', () => {
    render(<Example />);
    expect(screen.getByRole('button')).toBeDisabled();
  });
  test('チェックボックスをクリックするとボタンが有効化される', () => {
    render(<Example />);
    userEvent.click(screen.getByRole('checkbox'));
    expect(screen.getByRole('button')).toBeEnabled();
  });
});

初期状態での表示確認と、checkboxをクリックした後にdisabledの状態が変わるかテストしています。

disabledの場合

expect(screen.getByRole('button')).toBeDisabled();

ボタンが「disabledである」か状態をチェックする場合は、toBeDisabled()を使います。
getByRoleなどでbuttonのHTMLElementを取得して、expectでテストしましょう。

disabledではない場合

expect(screen.getByRole('button')).toBeEnabled();

ボタンが「disabledではない」状態をチェックする場合は、toBeEnabled()を使います。
toBeDisabled()に.notをつけることでも、同様のテストケースになります。

checkboxをクリックする場合は、userEvent.clickを使用します。

userEvent.click(screen.getByRole('checkbox'));

クリックについては、buttonのclickイベントをテストする方法【React Testing Library】という記事を書きました。気になる方は、あわせてこちらもご確認ください。

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

Reactで、buttonをクリックしてonClickイベントを発生させるテストを実装します。buttonをクリックするテストを実装使用するメソッドbuttonをクリックするには、次の２つのメソ...

まとめ：toBeDisabledとtoBeEnabledを使おう

buttonをのdisabledをチェックするには、toBeDisabled()を使えばOKです。
.toBeEnabled()でdisabledじゃないパターンもテストできます。
以上。