Chapter 03

ユニットテストを始める準備

Satoshi Takeda
Satoshi Takeda
2021.02.24に更新

パッケージのインストール

アプリケーションとユニットテストのサンプルを格納したリポジトリを Clone し、インストールをすればすぐ実行可能な状態になっています。

$ git clone git@github.com:tkdn/react-testing-sandbox.git
$ cd react-testing-sandbox
$ npm i

コードサンプルを動作させるための前提条件について書いていきますが、上記のインストールで準備はすでに整っているため、補足が多く不要と感じた場合は読み飛ばし次章へ進んでください。

  • TypeScript を利用しテストコードも TypeScript で記述する
  • Next.js が敷くファイル構成のまま
    • テストファイルである *.test.tsxsrc/components/Some/Some.tsx と並列に配置される想定(src/components/Some/Some.test.tsx
  • Next.js が依存するパッケージとの兼ね合いで、テスト用のパッケージとして以下を用意
    • jest : テストランナー
    • babel-jest : TypeScript での Jest 実行に必要
    • @types/jest : Jest 型定義
    • @testing-library/react : React コンポーネントテストのためのユーティリティ・ヘルパー
    • @testing-library/react-hooks : React が提供する Hooks テストのためのユーティリティ・ヘルパー
    • @testing-library/jest-dom : DOM チェックのために Jest のマッチャーを拡張
    • msw : 後述するリクエストインターセプトとレスポンスモックのためのライブラリ
    • node-fetch : window.fetch が Node.js で動作するよう振る舞わせるため利用

テスト実行

すでにリポジトリをクローンしパッケージのインストールが済んでいれば、リポジトリルートで npm run test を実行するとテストコードがすべて動作し正常終了するはずです。

package.json への補足

package.json に書くか、jest.config.js のようにファイル化するかは選択可能です。Jest 実行のための設定がいくつか package.json にあるので補足します。

{
  // ...
  "jest": {
    "setupFilesAfterEnv": [
      "./jest.setup.js"
    ],
    "testMatch": [
      "**/*.test.ts",
      "**/*.test.tsx"
    ],
    "verbose": true,
    "moduleNameMapper": {
      "^~/(.*)": "<rootDir>/src/$1"
    }
  },
  // ...
}
  • setupFilesAfterEnv にて実行時のセットアップに必要な記述をまとめるファイルパスを指定
  • testMatch でルートからの実行ファイルを指定
  • verbose Jest はデフォルトではテストケース名などを表示しないため出力の表示オプションを変更
  • moduleNameMapper よくある設定ですがモジュールのパスエイリアスでファイルが記述できるようにしている
    • Next.js + TypeScript でパスエイリアスを指定するには tsconfig.compilerOptions.paths へ書きますが、Jest 実行時には tsconfig を読まないため必要になります

jest.setup.js への補足

jest.setup.js
import "@testing-library/jest-dom"

記述された一部のみを補足しますが、DOM のためのカスタムマッチャー拡張のために必要な import 文でありセットアップ以外で気にかける必要はありません。

では次章以降で実際のテストコードを見てみましょう。