Jest & React Testing Libraryの理解学習

はじめに

Jest & React Testing Libraryを使って自動テスト（CI）を実施することになりました。
ただ、名前は聞いたことがあったけど、どうやって使うのかわからなかったので、調べました。

Jest & React Testing Libraryとは？

Jestとは、JavaScript テスティングフレームワークのことです。
これだけ聞いても、正直理解はできないです。
要は、JavaScriptで使うテストの種類です。

React Testing Libraryとは、Reactコンポーネントのテストを行うためのライブラリです。
Jestと似たような位置づけで理解しておけば大丈夫です。

Jest & React Testing Libraryの書き方

詳細を知りたい方は以下のリンクを確認してもらえると問題ないです。
今回はこの記事をもとにテストコードを作成していきます。

試しにテストを実行してみる

今回はアプリのタイトルを表示するテストを実施します。

App

export const App = () => {
    （略）
  return (
    <div>
      <h1 className={classes.h1} data-testid="title">
        学習記録一覧
      </h1>
    （略）
    </div>
   )
}

試しに以下のテストを作成しました。
テストは、こちらの想定と実行結果の比較が合致しているかを確認する機会と考えています。
そのため、expect(title)として想定をみています。
また、screen.debug();とすることですぐに確認できるようにしています。

componenteSample.spec.jsx

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

describe("Title Test", () => {
  it("タイトルが学習記録一覧であること", () => {
    // testId(title)を指定して取得
    render(<App />);
    const title = screen.getByTestId("title");
    expect(title).toHaveTextContent("学習記録一覧");
    screen.debug();
});

試しに実行してみると、以下の処理が反映されました。

passと記載していれば大丈夫です。

さいごに

さいごまで読んでいただきありがとうございました。
まだまだ続きます。