Next.jsにjestとenzymeを導入（next/babel使用）

以前、Next.jsにjestとenzymeを導入するという記事を書きました。

上記の手順でjestの実行はできたのですが、yarn devでアプリ起動するとなにやらbabelに関するエラーが。。

どうやらNext.js起動すると追加したbabelの設定ファイルの方が読み込まれて、babelのエラーが出てしまっているよう。

そこで、jestで使うbabelをnext.jsのbabelに変更したところ、よりすっきりした設定になったのでメモ。

next.jsのbabelが使える

next.jsにはデフォルトでbabelが入っており、これがjsxのトランスパイルなどjestにも適用できることが分かりました。
こちらの方がスッキリとした手順・設定で構築できます。

jestインストール

$ npm install --save-dev jest 

jest設定ファイルを生成

$ jest --init

command not found: jest の場合

以下を実行します。

./node_modules/.bin/jest --init   

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

babel.config.jsを設定

module.exports = {
    "presets": ["next/babel"],
};   

---

テストファイルのignore

Cypressを導入しており、jest実行でcypressのspecも読まれてしまうので、ignore設定をしました。

jest.config.js

...  
testPathIgnorePatterns: [
    "/node_modules/",
    "/cypress/"
],
...