💯

Next.js Jestでテストを実行する

2023/12/18に公開

Next.js

Test

Jest

tech

Next.jsのドキュメントを参考にJestでテストを実行してみたので、その手順を紹介します。

プロジェクトのセットアップ

プロジェクトの作成:

npx create-next-app@latest with-jest-app

Jestのインストール:
```
npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
```
- npm install -D: プロジェクトの開発依存関係としてパッケージをインストールします。
- jest: JavaScriptのテストフレームワーク。
- jest-environment-jsdom: ブラウザ環境を模倣するためのJest環境。
- @testing-library/react: Reactコンポーネントをテストするためのライブラリ。
- @testing-library/jest-dom: JestでDOMノードをより簡単にアサートするためのカスタムマッチャ。
Jest設定ファイルの生成:
```
npm init jest@latest
```
- これにより、Jestの設定ファイルjest.config.ts|jsがプロジェクトに自動的に生成されます。

Jest設定の更新

jest.config.tsファイルにnext/jestを使用して、Next.jsに対応した設定を追加します。

import type { Config } from 'jest'
import nextJest from 'next/jest.js'

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

const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // その他のセットアップオプション
}

export default createJestConfig(config)

import type { Config } from 'jest': Jestの設定型をインポートします。
nextJest: Next.jsのためのJest設定を生成する関数。
dir: './': JestがNext.jsの設定を読み込むためのディレクトリを指定します。
config: Jestのカスタム設定オブジェクト。

テストスクリプトの追加

package.jsonに以下のスクリプトを追加します。

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch"
  }
}

test: Jestを実行するコマンド。
test:watch: ファイルが変更されるとテストを自動的に再実行するためのコマンド。

テストの作成

プロジェクトのルートディレクトリに__tests__フォルダーを作成し、テストを追加します。

例１

// src/app/page.tsx
import Link from 'next/link'
import ButtonComponent from './components/ButtonComponent'
 
export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">About</Link>
      <ButtonComponent />
    </div>
  )
}

// __tests__/page.test.jsx

import '@testing-library/jest-dom'
import { render, screen } from '@testing-library/react'
import Page from '../app/page'

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

 screen.getByRole('heading', { level: 1 })
    expect(heading).toBeInTheDocument()
  })
})

import { render, screen } from '@testing-library/react': テスト用のユーティリティをインポート。
describe: テストスイートを定義。
it: 個々のテストケースを定義。
render(<Page />): テスト対象のコンポーネントをレンダリング。
expect: アサーションを行う。
例２

// src/app/components/ButtonComponents.tsx
'use client'
import React, { useState } from 'react';

const ButtonComponent = () => {
  const [text, setText] = useState('初期テキスト');

  const handleClick = () => {
    setText('更新されたテキスト');
  };

  return (
    <div>
      <button onClick={handleClick}>ボタンをクリック</button>
      <p>{text}</p>
    </div>
  );
};

export default ButtonComponent;

// __tests__/components/ButtonComponents.test.jsx

import '@testing-library/jest-dom';
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import ButtonComponents from '../../src/app/components/ButtonComponent'

describe('ButtonComponent', () => {
  it('ボタンをクリックするとテキストが変更される', () => {
    render(<ButtonComponents />);

    // 初期テキストの確認
    expect(screen.getByText('初期テキスト')).toBeInTheDocument();

    // ボタンのクリック
    fireEvent.click(screen.getByText('ボタンをクリック'));

    // 更新されたテキストの確認
    expect(screen.getByText('更新されたテキスト')).toBeInTheDocument();
  });
});

テストの実行

以下のコマンドでテストを実行します。
```
npm run test
```

これでテストが実行されます。

プロジェクトのセットアップ

Jest設定の更新

テストスクリプトの追加

テストの作成

テストの実行

Discussion