React Testing Library

React Testing Library を分かりやすく

React Testing Libraryは、Reactのコンポーネントをユーザーの視点からテストするためのツールで、"テストのためのユーザー"という思想に基づいています。

例えば、あなたが新しい自転車を購入したと想像してみてください。自転車をチェックするためには、実際にそれを乗ってみるのが最良の方法ですよね。同様に、React Testing Libraryは、コンポーネントを「乗ってみる」ためのツールと言えます。

React Testing Library の歴史的変遷

React Testing Libraryは、2018年にKent C. Doddsによって公開されました。それ以前は、Reactのコンポーネントテストは主にEnzymeを使用したもので、内部的な詳細（ステートやプロップス）にフォーカスしたテストが一般的でした。しかし、このアプローチはテストを複雑にし、ユーザーの体験とはかけ離れたものとなりました。React Testing Libraryの登場により、ユーザー中心のテストが可能になり、より信頼性の高いテストを行うことができるようになりました。

React Testing Library と Jamstack の関係

React Testing Libraryは、Jamstackアーキテクチャで構築されたReactアプリケーションのテストにも利用できます。Jamstackは、JavaScript、API、Markupからなるモダンなウェブ開発アーキテクチャで、Next.jsやGatsbyなどのReactベースのフレームワークと相性が良いです。React Testing Libraryを使用すると、これらのフレームワークで作成したコンポーネントやページのユーザー体験をテストすることができます。

React Testing Library を使うメリット

ユーザー中心のテスト

React Testing Libraryは、実際のユーザー体験に近い形でテストを行うことが可能です。ユーザーはコンポーネントの内部状態を気にしないで操作しますから、同じようにテストも行うことで、より現実的なテスト結果を得ることができます。

リファクタリングへの強さ

React Testing Libraryのテストは、実装詳細に依存しないので、リファクタリング時にテストを修正する必要がありません。コードの改善を行っても、テストがパスすることを確認すれば、ユーザー体験が維持されていることが保証されます。

視覚障害者を含むアクセシビリティの確認

React Testing Libraryは、視覚障害者が使用するスクリーンリーダーが解釈するような方法で要素をクエリすることができます。これにより、アクセシビリティのテストも容易に行うことができます。

React Testing Library を実装

React Testing Libraryを使ってNext.jsのコンポーネントをテストする例を見てみましょう。

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

type Props = {
  message: string
}

const Greeting = ({ message }: Props) => {
  return <h1>{message}</h1>
}

test("Greeting component renders with given message", () => {
  render(<Greeting message="Hello, World!" />)
  const greetingElement = screen.getByText("Hello, World!")
  expect(greetingElement).toBeInTheDocument()
})

このコードは、Greetingコンポーネントが与えられたメッセージを正しくレンダリングするかをテストします。render関数でコンポーネントをレンダリングし、screen.getByTextで指定したテキストを持つ要素を取得します。そして、その要素がドキュメントに存在することを期待しています。

React Testing Library を学ぶ

役立つリソースを以下に示します。

これらのリソースを活用して、React Testing Libraryの魅力を最大限に活かすことができるでしょう。テストを実際のユーザー体験に近づけることで、より信頼性の高い

アプリケーションを構築する手助けをしてくれます。それでは、ハッピー・テスティング！