TypeScript + React にゼロからJest + React Testing Libraryを追加する

背景

React ComponentをPrivate Packageとして公開するにあたり、CRAやNextjsフレームワークを使用しなかったので、ゼロからテストを構築する必要がありました。

Install

# 必要なパッケージは以下です。
npm i -D jest @types/jest jest-environment-js-dom @testing-library/react @testing-library/user-event @testing-library/jest-dom ts-jest 

それぞれ以下の役割があります。
*さえあれば、エラーが発生せずにnpm run testが動作します。その他は実際のテストでほぼ確実に使用するであろう拡張ライブラリです。

• jest*
  テストフレームワーク。テスト実行、Coverage出力、Mockなど、テストに必要な基本かつ重要な処理をおこなってくれるコア部分です。

• @types/jest*
  TypeScriptでテストを記載します(xxx.test.ts or tsx)。Jestのみでは、TypeScriptファイルがJestが提供する変数名を認識してくれないので、追加します。

• jest-environment-js-dom*
  React Testing Libraryでは、Reactを通して最終的に表示されるUIを描画してくれます。その際に、Browser環境を模したものが必要となるため、追加します。

• @testing-library/react*
  Reactで描画するUIを表示してくれます。useEffectやuseStateなどで非同期的に変化するUIを的確に捉えるためのwaitForなどの超便利メソッドも用意されています。

• @testing-library/user-event
  イベント発火を行うライブラリです。

• @testing-library/jest-dom
  便利な拡張アサーションを提供してくれます。

• ts-jest*
  Jestがテスト実行する際に、TypeScript文法を理解する必要があります。このライブラリを用いることで、ts、tsxファイルがcommonjs形式にトランスパイルされます。

設定

• jest.config.js

  テスト環境やトランスパイル設定を組み込みます。

jest.config.js

/** @type {import('jest').Config} */
module.exports = {
  preset: 'ts-jest', // te-jestパッケージ
  testEnvironment: 'jsdom', // jest-environment-js-domパッケージ
  setupFilesAfterEnv: ['<rootDir>/src/tests/setup-jest.ts'] // setup-jest.tsファイルの位置
};

• setup-jest.ts
  jest.config.jsで読み込むように設定したファイルです。これは、@testing-library/jest-domを全テストで使用するために使用します。

setup-jest.ts

import '@testing-library/jest-dom';

補足

• 絶対パスでImportしたい場合

jest.config.js

  // ↑↑省略↑↑
  moduleDirectories: ['node_modules', __dirname],

• {export { default as v1 } from './v1.js'でエラーが発生した場合

  Jestとuuidで互換性エラーが発生しているので、以下のように解決できます。

  詳細を知りたい方はこちら

jest.config.js

  // ↑↑省略↑↑
moduleNameMapper: {
    uuid: require.resolve('uuid')
},