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
importEnzymefrom"enzyme";importAdapterfrom"enzyme-adapter-react-16";Enzyme.configure({adapter:newAdapter()});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/"],...