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

最近、テスト技法について学習したので、個人ブログにテストを書いてみました。

テストを書くことは、コードの品質を保ち、変更に対しても安心感を与える重要なステップです。

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

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ブロックを使用することをお勧めします。