Next.jsにjestとenzymeを導入する

jestインストール

jestインストール

$ npm install --save-dev jest 

jsx構文のトランスパイルのため、babel等をインストール

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

jest設定

jest設定ファイルを生成

$ jest --init

これで最低限jestでテスト実行できる。
.jsをjsx構文で解釈させるために設定が必要。

修正

jest.config.js

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

追加

jest.config.js

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

Enzymeのインストール

インストール

yarn add --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'],
  // ...
}

jest実行でエラー

「regeneratorRuntime is not defined」

jestのテスト対象コードでasync/awaitを使っているとこのエラーが出るようです。

回避方法は以下。

.babelrcを以下のようにする
.babelrcはpackage.jsonと同じディレクトリに配置しました。

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {            // babelのターゲットを指定
          "node": "current"
        }
      }
    ]
  ]
}

参考

Next.jsのプロジェクトにJestとEnzymeを導入する手順
asyncを使用したコードをjestでテストすると「regeneratorRuntime is not defined」エラーが発生