テスト環境のセットアップ

Jest / React Testing Library を入れないことには何も始まらないのでまずインストールします。JestはJavaScriptのテストフレームワークで、Testing LibraryはUIコンポーネントのテストに役立ちます。

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

次に、Jestの設定を行います。package.jsonに以下のスクリプトを追加します。

{ "scripts": { "test": "jest" } }

また、jest.config.jsファイルを作成し、Jestの設定を記述します。

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
};

jest.setup.jsでは、Testing Libraryの設定を行います。

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

テストの例

簡単なテストを書いてみます。

export const Sample = () => {
  return (
    <main>
      <h1>Nextjs+Jestのテスト</h1>
      <p>Jestを使ったテストです</p>
    </main>
  );
};

@testing-library/react を使用して、コンポーネントの内容が正しくレンダリングされていることを確認するテストコードです。

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

describe('Sample component', () => {
  test('renders heading and paragraph', () => {
    render(<Sample />);
    const heading = screen.getByRole('heading', { level: 1 });
    const paragraph = screen.getByText('Jestを使ったテストです');

    expect(heading).toBeInTheDocument();
    expect(heading).toHaveTextContent('Nextjs+Jestのテスト');
    expect(paragraph).toBeInTheDocument();
  });
});

基本的な構成

describe('Sample component', () => { ... }); :
Sampleコンポーネントに関するテストをグループ化します。
test('renders heading and paragraph', () => { ... });:
Sampleコンポーネントがヘッディングと段落をレンダリングすることをテストします。

このようにすることで、テストが論理的にグループ化され、テストレポートがより見やすくなります。複数のテストケースがある場合や、特定のコンポーネントに関する複数のテストを実行する場合には、describeブロックを使用することをお勧めします。

Jestに関する記事

Next.jsを使ったサイトでUnitテストを書く

カテゴリ 一覧

カテゴリ一覧