Testing Libraryで暗黙的なロールを使用したDOMの取得方法

背景

現在以下の書籍でフロントのテストを学習しているので、勉強になったDOMの取得方法をまとめる。 書籍通り、ReactのUIコンポーネントのテスト方法を記載していく。

概要

ReactのUIコンポーネントのDOMを取得する方法で、暗黙的なロールを活用した取得方法があったので、まとめていく

本題

以下のコンポーネントのテストをしていく。

import {ReactNode} from "react";

export const Heading = ({children}: {children: ReactNode}) => {
    return (
        <h1>{children}</h1>
    );
};

今回は簡易的に、propsの値がh1タグで表示されているかをテストしていく。

import {render, screen} from "@testing-library/react";
import {Heading} from "./Heading";

test('propsが値がh1タグに存在していること', () => {
    render(<Heading>test</Heading>)

    expect(screen.getByRole('heading', {name: 'test'})).toBeInTheDocument()
})

上記のgetByRoleの第一引数にheadingを指定しているが、h1タグの暗黙的なロールがheadingであるため、headingを指定している。
このように暗黙的なロールをうまく使えば、test-idみたいなカスタム属性をなどを使用せずに、テストをかくことができる。 また、Testing Libraryも公式も暗黙的なロールを使用することを推奨している。

暗黙的なルール一覧はこちらから確認ができる。
※上記はaria-queryというライブラリのドキュメントであるが、Testing Libraryのライブラリは内部的に依存するので、上記を参考にしても問題ない

まとめ

UIコンポーネントのテストをする際は、暗黙的なロールを使用することで、テストを書きやすくなるので、ぜひ活用していきたい。

参考文献

Testing Library
暗黙的なルール一覧(aria-query)
フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識