React Testing Libraryを使ってみた（超基礎編）

はじめに

React Testing Libraryの超基礎編という事で、小さいコンポーネントのテストをしてみます。
テストツールはJestを使用しています。

React Testing Libraryとは

公式ドキュメントでは「ユーザー中心の方法でUIコンポーネントをテストするのに役立ちます」とあり、
・画面表示
・テキストボックス等への入力
・ボタンの押下
などのテストをするためのライブラリです。

テスト

テスト対象コンポーネント

今回のテスト対象のコンポーネントです。ファイル名は「Hello.jsx」とします。
「Hello React!」という文字が表示されているだけのものです。

import React from "react";
 
const Hello = () => {
  return (
    <div>
      Hello React!
    </div>
  );
};
 
export default Hello;

テストコード

テストコードを記述するファイル名は「[テスト対象].test.jsx」なので、「Hello.test.jsx」となります。
以下が「Hello React!」という文字が表示されて事を確認するテストコードです。

import React from "react";
import { render, screen } from "@testing-library/react";
import Hello from "./Hello";
 
describe("画面表示", () => {
  it("Hello React! が表示されている事", () => {
    render(<Hello />);
    expect(screen.getByText("Hello React!")).toBeInTheDocument();
  });
});

テストコードの解説です。

describe：テストスイートの内容を記述します。

describe("画面表示", () => {
 
});

it：テストケースの内容を記述します。

it("Hello React! が表示されている事", () => {
 
});

テスト対象のコンポーネントを内容を取得しています。

render(<Hello />);

コンポーネントに「Hello React!」という文字列が存在する事をテストしています。

expect(screen.getByText("Hello React!")).toBeInTheDocument();

テスト実行

下記のコマンドでテストを実行すると、テストが正常に終了する事が確認できます。

npm test -p Hello.test.jsx

未分類React

Posted by ababa