Next.jsプロジェクトにJestを導入し、Reactコンポーネントをテストする方法を説明します。Jestを設定し、簡単なテストを実行できるところまでやってみましょう。
以前、Next.jsの環境を作り自動整形機能とSotrybookの導入した開発環境構築について紹介しました。今回はそこからさらにJestを導入する手順を紹介したいと思います。
1. 必要なパッケージのインストール
まず、Jestとその関連パッケージをインストールします。これにより、Jestを使ってテストを実行できる環境が整います。
npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom ts-jest @types/jest上記のコマンドで、必要なすべてのパッケージを一度にインストールできます。
2. Jestの設定ファイルを作成
プロジェクトのルートディレクトリに jest.config.tsファイルを作成し、以下の内容を記述します。この設定により、JestがTypeScriptとCSSファイルを適切に処理できるようになります。
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
moduleNameMapper: {
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
},
transform: {
'^.+\\.(ts|tsx)$': 'ts-jest',
'^.+\\.(js|jsx)$': ['babel-jest', { presets: ['next/babel'] }],
},
globals: {
'ts-jest': {
tsconfig: {
jsx: 'react-jsx',
},
},
},
};3. tsconfig.jsonの編集
テストファイルをコンパイルから除外するために、tsconfig.jsonを以下のように編集します。
{
"exclude": [
"node_modules",
"out",
".next",
"**/*.test.ts",
"**/*.test.tsx"
]
}4. テストするコンポーネントの作成
ここでは、Hogeという簡単なコンポーネントを作成します。app/_components/Atoms/Hoge/index.tsxに以下のコードを記述します。
import React from "react";
const Hoge = () => {
return <div>Hoge</div>;
};
export default Hoge;5. テストファイルの作成
次に、コンポーネントのテストファイルを作成します。app/_components/Atoms/Hoge/index.test.tsxに以下のテストコードを記述します。
import React from "react";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import Hoge from ".";
describe("Hoge", () => {
it("Element", () => {
render(<Hoge />);
const Element = screen.getByText("Hoge");
expect(Element).toBeInTheDocument();
});
});このテストは、Hogeコンポーネントが正しくレンダリングされ、”Hoge”というテキストが表示されることを確認します。
6. package.jsonの編集
テストを実行するためのスクリプトをpackage.jsonに追加します。
"scripts": {
"test": "jest",
"test:watch": "jest --watch"
}7. テストの実行
ターミナルで以下のコマンドを実行し、テストを実行します。
npm testnpm test を実行すると、Jestが設定ファイルに従ってテストを実行し、結果を表示します。
