Jest + React Testing Libraryで同じようなDOMの状態チェックをする

同僚の実装を見て「こうすればできるのでは？」と思ってやってみたメモ。同じような構成のDOMがたくさんあって、それぞれにTest IDなどを振るのがめんどくさい場合に便利。

下記はfooラベルを持つラジオボタンがたくさんあるAppComponentのテストをするケース。

import { render, screen } from '@testing-library/react';
import { AppComponent } from './AppComponent';

describe('Sample', () => {
  it('test', async () => {
    await render(<AppComponent />);

    screen
      .getAllByLabelText('foo')
      .forEach((radio) => expect(radio).not.toBeChecked());
  });
});

getAll~はHTMLElementの配列を返すので、ループ回して配列の要素にアクセスすればexpectにチェインする処理が実行できる。