💯

Next.jsプロジェクトのJestのコンパイラをBabelからSWCにしてみた

2022/01/16に公開

はじめに

表題通り、Next.jsのJestのコンパイラをBabelからSWCにしてみました。
具体的にはbabel-jestnext-jestに置き換えたのでその備忘録です。

前提

下記記事でセットアップしたものを置き換えました。
特殊なことはしていないですし、ほとんど公式ドキュメント通りなので必ず読む必要はありませんが、ご興味ありましたらご一読ください。
https://zenn.dev/a_da_chi/articles/0ea66053a8b778

設定内容

ほとんど公式ドキュメント通りにjest.config.jsを設定しました。
https://nextjs.org/docs/testing#setting-up-jest-with-the-rust-compiler

jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  moduleDirectories: ['node_modules', '<rootDir>/'],
  roots: ['<rootDir>/src/'],
  testEnvironment: 'jest-environment-jsdom',
  testPathIgnorePatterns: [
    '/node_modules/',
    '<rootDir>/src/__tests__/utils.tsx',
  ],
}

module.exports = createJestConfig(customJestConfig)

公式ドキュメントとの差分は以下の2点です。

  • srcディレクトリをルートディレクトリにするためにrootsに設定を追加
  • <rootDir>/src/__tests__/utils.tsxをテスト対象から除外するためにtestPathIgnorePatternsに設定を追加

おわりに

ローカルとCIでそれぞれJestを実行してみたところ、自分の環境&テストコードでは25%〜30%ほど速度改善されていました(正確に測定したわけではないのであくまで参考程度です)。

next/jestはまだexperimentalのようですが、興味のある方は置き換えてみてください。

それではよいNext.jsライフを!

Discussion