概要

Next.jsでのテスト実装は、アプリケーションの品質と安定性を保つために重要です。特に、JestとReact Testing Libraryを使用することで、コンポーネントのレンダリングや動作を効率的にテストできます。この記事では、Jest + React Testing Libraryを用いたテスト環境のセットアップから実際のテスト実行までの流れを解説します。

Jest + React Testing Libraryの導入

まず、JestとReact Testing Libraryのセットアップを行います。

必要なパッケージのインストール

以下のコマンドで必要なパッケージをインストールします。

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

TypeScriptを使用している場合は、追加で次のパッケージもインストールします。

npm install --save-dev ts-jest @types/jest

Jestの設定

プロジェクトのルートディレクトリにjest.config.jsを作成し、以下の設定を追加します。

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
};

この設定で、TypeScriptとJSXファイルをJestでテストできるようにします。

package.jsonの編集

テストを実行できるように、package.jsonのscriptsに以下を追加します。

"scripts": {
  "test": "jest --watchAll"
}

テストファイルの作成

次に、__tests__ディレクトリをプロジェクトのルートに作成し、その中にテストファイルを配置します。例えば、sample.test.tsxというファイルを作成し、以下のコードを追加します。

import { render, screen } from '@testing-library/react';
import Sample from '../components/Sample';
describe('Sample Component', () => {
  it('renders correctly', () => {
    render(<Sample />);
    const heading = screen.getByRole('heading', { name: /Hello/i });
    expect(heading).toBeInTheDocument();
  });
});

このテストは、Sampleコンポーネントが「Hello」というテキストを含む見出しを正しくレンダリングするかどうかを検証します。

テストの実行

npm run testコマンドで、テストを実行します。テストが実行され、結果がターミナルに表示されます。--watchオプションを使用することで、ファイルが変更されるたびにテストが自動的に再実行されます。

まとめ

JestとReact Testing Libraryを使ったNext.jsのテスト環境は、比較的簡単に構築できます。これにより、コンポーネントの単体テストやUIテストを効率的に行うことができ、コードの品質を保ちながら安心して開発を進めることが可能です。テスト環境をしっかりと整え、プロジェクトのスケールに応じてテスト範囲を拡大していくことが重要です。