Jest

ジェスト

Jest を分かりやすく

Jest（ジェスト）は、Facebook が開発した JavaScript のテストフレームワークです。Jest は React や Next.js のようなフレームワークとの組み合わせで広く使われており、TypeScript もサポートしています。Jest の特徴は、シンプルで強力な機能を提供しており、シームレスなテスト環境を構築できることです。

Jest を Next.js と TypeScript で使用する

Next.js と TypeScript のプロジェクトで Jest を使ってテストを行うには、まず Jest と関連モジュールをインストールします。

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

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

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
}

ここで、preset に ts-jest を指定することで、TypeScript で書かれたソースコードを Jest でテストできるようになります。また、CSS や SCSS などのスタイルファイルをインポートする際にエラーが発生しないように、identity-obj-proxy を使ってモック化しています。

サンプルテストの作成

Next.js と TypeScript で作成したコンポーネントのテストを行うために、以下のようなサンプルテストを作成します。

1 コンポーネントを作成

例として、components/Counter.tsx というカウンターコンポーネントを作成しましょう。

// components/Counter.tsx
import React, { useState } from 'react'

interface Props {
  initialCount: number
}

const Counter = ({ initialCount }: Props) => {
  const [count, setCount] = useState(initialCount)

  const increment = () => {
    setCount(count + 1)
  }

  const decrement = () => {
    setCount(count - 1)
  }

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  )
}

export default Counter

2 テストファイルを作成

__tests__ ディレクトリをプロジェクトのルートに作成し、Counter.test.tsx という名前でテストファイルを作成します。

// __tests__/Counter.test.tsx
import React from 'react'
import { render, fireEvent } from '@testing-library/react'
import Counter from 'components/Counter'

describe('Counter', () => {
  it('renders initial count', () => {
    const { getByText } = render(<Counter initialCount={5} />)
    expect(getByText('5')).toBeInTheDocument()
  })

  it('increments the count', () => {
    const { getByText } = render(<Counter initialCount={5} />)
    fireEvent.click(getByText('+'))
    expect(getByText('6')).toBeInTheDocument()
  })

  it('decrements the count', () => {
    const { getByText } = render(<Counter initialCount={5} />)
    fireEvent.click(getByText('-'))
    expect(getByText('4')).toBeInTheDocument()
  })
})

このテストファイルでは、@testing-library/react を使って、Counter コンポーネントの挙動を確認しています。各テストケースでは、コンポーネントが正しくレンダリングされるか、ボタンをクリックすることでカウントが増減するかを確認しています。

3 テストを実行

テストを実行するために、package.json の scripts セクションに以下の設定を追加します。

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

これで、npm test コマンドを実行することで、Jest を使ってテストが実行されます。

npm test

以上で、Next.js と TypeScript のプロジェクトで Jest を使ってテストを行う方法を解説しました。

まとめ

Jest は、Next.js と TypeScript のプロジェクトで使いやすい JavaScript のテストフレームワークです。この記事では、Jest を Next.js と TypeScript のプロジェクトで使用する方法、サンプルテストの作成方法、テストの実行方法について解説しました。Jest を使って、アプリケーションの品質を向上させましょう。

Next.js を学ぶ一覧へ