【React】デフォルトで生成されるファイルの単体テスト内容をまとめてみた。

背景

Reactでの開発において、単体テストのやり方をアウトプットとしてまとめました。
規模間の大きなReactでの開発になるにつれ、単体テストのコードを作成する必要性が大きくなってくると思います。
また、テストコードを作成しないといけないのでめんどくさく思ってしまいますが、単体テストを実施する事で後々の作業も楽になると考えています。

環境構築

■ React version：react@18.2.0

次のコマンドで開発するReactのひな形フォルダを作成します。
フォルダの作成が完了したらcdコマンドでそのフォルダに移動します。

npx create-react-app sampletest

デフォルトで作成されているファイルについて

■ setupTests.js

作成されたひな形のうち、setupTests.jsファイルには以下の記述があり、デフォルトでテストに使用するライブラリがインポートされています。

setupTests.js

import '@testing-library/jest-dom';

■ App.test.js

実施するテストの内容をrenders learn react linkのように記述し、Appコンポーネントをテストの対象としています。
テストを実施した際にこのrenders learn react linkの文字は出力されます。

App.test.js

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

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

上記の/learn react/iに関しては、下記App.jsファイルのaタグ内におけるLearn Reactの文字を指しています。

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

また、/iを記述する事で大文字と小文字を無視し、下記のコード部分でLearn ReactがApp.js内に記載があるのかを確かめています。
デフォルトではApp.jsのAppコンポーネント内にlearn reactの記載があるので、テスト結果としてはエラーなく成功します。

const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();

実際に以下のコマンドでテストを行ってみます。

npm test

補足：npm test について
以下画像のpackage.jsonのscripts部分にデフォルトでtestの記載があるので、npm testでテストを実行する事ができます。

このコマンドを実行すると下記画像のWatch Usageが表示されるかと思うのでaを選択します。

以下のように問題なくテストが成功しました！