Next.jsのプロジェクトにJestとEnzymeを導入する手順

はじめに

ReactのフレームワークであるNext.jsを使ったBoilerPlateは
create-next-appで生成可能ですが、テンプレートURLを指定せずに生成したプレーンなBoilerPlateにはテスト用の仕組みが含まれていません。

当記事ではその状態からJestとEnzymeを使ってテストを書ける環境を構築した手順を示します。

本記事で実施した内容は下記のリポジトリにpushしてあります。
https://github.com/nemolize/jest-enzyme-to-next

※ なお、本記事を書いた2019-04-07時点で最新リリースとなる Nuxt.js v7.0.2 をベースに検証しています。Nuxt.jsのバージョンが異なったり時期が異なる場合は適宜読み替えて下さい。

1. Next.jsプロジェクトの生成

サンプルとしてnext-exampleというプレーンなNextプロジェクトを生成し、それに対しての追加という形で進めていきます。

# プロジェクト生成
$ npx create-next-app next-example

2. Jestのインストールと設定追加

JSX構文のトランスパイルが必要なのでbabelなどもインストールします

$ npm install --save-dev jest babel-jest babel-core babel-preset-env babel-preset-react

Jest設定ファイルを生成します

$ jest --init

The following questions will help Jest to create a suitable configuration for your project

✔ Would you like to use Jest when running "test" script in "package.json"? … yes
✔ Choose the test environment that will be used for testing › jsdom (browser-like)
✔ Do you want Jest to add coverage reports? … yes
✔ Automatically clear mock calls and instances between every test? … yes

これで最低限Jestでテストを実行できるようにはなりますが、*.jsをJSX構文で解釈させるために設定の追加と修正が必要です

jest.config.js(更新)

module.exports = {
  // (省略)
  transform: { "^.+\\.jsx?$": "babel-jest" } // 拡張子がjs,jsxのファイルをbabel-jestでトランスパイルさせる
  // (省略)
}

babel.config.js(追加)

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"]
};

3. Enzymeのインストールと設定追加

インストール

$ npm install --save-dev enzyme enzyme-adapter-react-16

Enzymeの利用時は一度だけEnzyme.configure()を呼ぶ必要があるので、下記のようなスクリプトを追加します。

jest.setup.js(追加)

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

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

Jestのテスト前に実行されるようにします。

jest.config.js(更新)

module.exports = {
  // (省略)
  setupFiles: ['./jest.setup.js'],
  // (省略)
}

4. テストの追加

例としてcreate-next-appで生成されるHomeコンポーネントのテストを追加してみます。
Enzymeが提供するshallow()を使ってコンポーネントを描画すると、外部コンポーネントがモックされるので、コンポーネントの単体テストを簡単に書くことができます。

pages/index.spec.js(追加)

import React from "react";
import {shallow} from "enzyme";
import Home from "./index";

describe("Home", () => {
  test("h1タグが描画されること", () => {
    const wrapper = shallow(<Home />);
    expect(wrapper.find("h1").text()).toEqual("Welcome to Next!");
  });
});

5. テストの実行

$ jest           
 PASS  pages/index.spec.js
  Home
    ✓ h1タグが描画されること (9ms)

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