Next.js × Hono.js｜ Vitestを導入してroutesをテストする

Next.jsで作ったWebアプリにバックエンド（Hono.js）を導入したため、ルートテスト（HTTP層のテスト）を実施する。

1. Vitestをインストール

Next.jsの公式ページより下記コマンドを実行して、テストに必要なライブラリをインストール。

npm install -D vitest @vitejs/plugin-react@^5 vite-tsconfig-paths jsdom @testing-library/react @testing-library/dom

⚠️補足：

1. @vitejs/plugin-reactにおいて、そのままインストールしたところ既存プロジェクトのViteのバージョンと合わなかったため今回はバージョンを^5で使用して合わせる。

2. routeのテストだけの場合はnpm install -D vitestのみのインストールでOK。今回は今後のReactコンポーネントテストやDOMを使うテストも見据えて、必要なライブラリをまとめて導入。

2.package.jsonにスクリプト追加

{
  "scripts": {
    "test": "vitest run"
  }
}

補足情報：VitestにはWatchモードというものがあり、ファイルの変更を自動検知して関連するテストだけを高速で再実行することができる。

"test": "vitest run"・・・1回実行して終了

"test": "vitest"・・・デフォルトでWatchモードで動く

３.動作確認テストを作ってみる

今回プロジェクトのバックエンドのroutesは`src/backend/index.ts`に全て入っているので、同じルート上にhealth.test.tsという名前で仮のテストを作ってみる。

import { describe, expect, it } from "vitest"

describe("Vitestセットアップ", () => {
  it("runs tests", () => {
    expect(1 + 1).toBe(2)
  })
})

これでscriptに設定したnpm run testを実行すれば、テストが行えるはず…。

４.テスト実行

下記のようにテストが実行され、PASSが成功。

 ✓ src/backend/health.test.ts (1 test) 2ms
   ✓ Vitestセットアップ (1)
     ✓ runs tests 1ms

 Test Files  1 passed (1)
      Tests  1 passed (1)

まとめ

テストの導入から、実行までを実際に行いました。

あとは「テストしたいこと」を決めて、調べながらテストコードを書いていきます。