@testing-library/reactでboolean型のstateのテスト

概要

@testing-library/reactを使ったことがあまりないのでメモとして残しておきます。

内容としては、useStateを使ってcheckboxの値を管理した実装のテストの記述です。

実装コード

.jsx

import { useState } from 'react';

export const Checkbox = () => {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <div>
      <input type="checkbox" checked={isChecked} onChange={(e) => {setIsChecked(e.target.checked)}} />
      テスト
    </div>
  );
}

テストコード

.jsx

import { fireEvent } from '@testing-library/react';
import { render } from '@testing-library/react';

describe('checkbox', () => {
  it('checkboxのstate更新チェック', async () => {
    const checkbox = render(<Checkbox />);
    const target = checkbox.getByRole('checkbox');

    // 初期値はfalse
    expect(target.checked).toStrictEqual(false);

    // チェックボックスを押し、stateの更新をする
    fireEvent.click(target);
    expect(target.checked).toStrictEqual(true);
  });
});

getByRoleでcheckboxというエレメントを取得し、fireEvent.clickで要素をクリックする