Next.jsのテスト環境を構築する

1. Next.jsの環境を作成する

公式ページの手順で雛形プロジェクトを生成する。

npx create-next-app

2. テスト関係の依存ライブラリを導入する

　導入するのは以下のライブラリ。

• jest
• @babel/preset-env
• @babel/preset-react
• enzyme
• enzyme-adapter-react-16

　Enzymeは手に馴染んでいるので使っているだけなので，必須ではないです。

npm i -D jest @babel/preset-env @babel/preset-react enzyme enzyme-adapter-react-16

3. Jestの設定ファイルを生成する

./node_modules/.bin/jest --init

対話モードで色々聞かれるので手元の環境に合わせて回答する。

4. babelの設定ファイルを作成する

プロジェクト直下に.babelrcを作成する。 ↑で導入したプリセットファイルを使う設定はここに書く。

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ]  
}

5. Jestのセットアップファイルを作成する

Enzymeの初期設定処理を実装するファイルjest.setup.jsを作成する。

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

Enzyme.configure({ adapter: new Adapter() });

6. テストコードを用意する

テストコードを実装する。ファイルは__tests__に置く。

import React from "react";
import {shallow} from "enzyme";
import Sample from '../pages/sample'

describe("Sample", () => {
  test("h1タグが描画されること", () => {
    const wrapper = shallow(<Sample />);
    //TODO: チェック処理を実装する
  });
});

7. テストを実行する

npm test

 PASS  __tests__/sample.test.js
  Home
    ✓ h1タグが描画されること (3 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.689 s, estimated 2 s
Ran all test suites.