[Next.js] テスト

概要

今回のブログポストではTypeScriptをベースにしたNext.jsプロジェクトにJestとReact Testing Libraryを使ってテストができる環境を構成する方法と、構成した環境でテストコードを作成する方法について説明します。

ここで紹介するソースこどは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-nextjs/tree/main/5.test

ブログリスト

このブログポストはシリーズで作成されています。次はNext.jsのシリーズリストです。

TypeScriptベースNext.jsプロジェクト生成

TypeScriptが適用されたNext.jsでJestとReact Testing Libraryを使えるテスト環境を構成するため、次のコマンドを実行してTypeScriptが適用されたNext.jsプロジェクトを生成します。

npx create-next-app --typescript my-app

JestとReact Testing Libraryのインストール

TypeScriptが適用されたNext.jsプロジェクトでテストコードを作成するためにはJestとReact Testing Libraryをインストールする必要があります。次のコマンドを実行してJestとReact Testing Libraryをインストールします。

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

Jestの設定

TypeScriptベースのNext.jsプロジェクトでJestでテストコードを作成するためにはJestを設定する必要があります。./jest.setup.jsファイルを生成して下記のように修正します。

// Optional: configure or set up a testing framework before each test.
// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`

// Used for __tests__/testing-library.js
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'

このファイルはJestの全てのテストコードに共通で使える設定やMockを定義するとき使います。

次は、./jest.config.jsファイルを生成して次のように修正します。

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

Next.jsはバージョン12からJestの基本設定を提供しています。当該設定を使うためnext/jestをインポートして、私たちが作ったjest.setup.jsファイルを使えるように修正しました。この設定でJestでNext.jsの機能(next.config.js、.envなど)を使うことができます。

テストコード作成

このように設定したJestとReact Testing Libraryを使ってテストコードを作成してみましょう。./tests/index/index.test.tsxファイルを生成して、次のように修正します。

import { render, screen } from '@testing-library/react'
import Home from '../../pages/index'

describe('Home', () => {
  it('renders a heading', () => {
    const { container } = render(<Home />)

    const heading = screen.getByRole('heading', {
      name: /welcome to next\.js!/i,
    })

    expect(heading).toBeInTheDocument()

    expect(container).toMatchSnapshot()
  })
})

テストコードについて詳しい説明は省略します。create-next-appコマンドで生成された基本ページコンポーネントである<Home />を画面に表示してwelcome to next.js!と言うテキストがうまく表示されたか確認するコードです。

また、toMatchSnapshotのテストを使って、スナップショットテストもしました。

スクリプト

このように作成したテストコードがうまく動作するかどうか確認するため、package.jsonファイルを次のように修正します。

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "test": "jest --watch",
  "test:ci": "jest --ci"
},

test: 変更が発生する時、テストコードを自動で実行するようにJestを実行します。
test:ci: CI/CDでテストコードを実行する時、使います。

実行

このように設定したら、次のコマンドを実行して、私たちが作成したテストコードを実行してみましょう。

npm test

問題なく実行されたら、下記のような結果が表示されます。

 PASS  tests/index/index.test.tsx
  Home
    ✓ renders a heading (101 ms)

 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written from 1 test suite.

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 written, 1 total
Time:        2.048 s
Ran all test suites related to changed files.

Watch Usage
 › Press a to run all tests.
 › Press f to run only failed tests.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

また、スナップショットのテスト結果がtests/index/__snapshots__/index.test.tsx.snapファイルに生成されたことが確認できます。