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

JavaScript
スポンサーリンク

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

disabledかチェックする方法

使用するメソッド

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

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

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

「disabledではない」ケースは、toBeEnabledでチェックできます。
toBeEnablednot.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】という記事を書きました。気になる方は、あわせてこちらもご確認ください。

まとめ:toBeDisabledとtoBeEnabledを使おう

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

React18の新機能をチェック

Udemyで、React18のアップデート内容をわかりやすく解説している動画がありました。
無料の動画教材なので、時間がある時に流し見するだけでOK!
新機能のポイントを抑えることができるので、おすすめです。

コメント

タイトルとURLをコピーしました