Next.js + typescriptのプロジェクトにJest & React Testing Libraryを追加する

日本語の記事が見つからなかったため共有します。
このページのやり方が古くなっていたら教えてください。

設定方法

install

yarn add -D jest @testing-library/react @testing-library/jest-dom

babel.config.js

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

jest.config.js

module.exports = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["@testing-library/jest-dom"],
  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
};

セットアップ用のファイルを作成してsetupFilesAfterEnvにファイルパスを記載する方法もあります。
CSSモジュールを使う場合はさらにmoduleNameMapperにidentity-obj-proxyを追加します。

.spec.js(.test.js)をpagesディレクトリ内に置かない

pagesディレクトリ内のファイルに基づいてルーティングが行われるため、テスト用のファイルを一緒のディレクトリに入れるとエラーが発生します。

そのときに出てくる

• ReferenceError: expect is not defined
• ReferenceError: test is not defined

などでググると全く関係のない解決方法が出てきます。

解決方法としては

• testsディレクトリを作成して分ける
• pagesはルーティング用と割り切り、実体はcomponentsなどのディレクトリに置く

などがあると思います。

おまけ：Module not found: Can't resolve 'fs'

getServerSidePropを使用する場合、fsでエラーが出ることがあると思いますがググると古い解決方法が上に出てきます。
Webpack5の場合はconfig.resolve.fallback.fsで設定できます。

next.config.js

module.exports = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
};