Nuxt4のプロジェクトにVitestを導入する

2025-12-19

はじめに

今回は、Nuxt4のプロジェクトにVitestを導入した際に遭遇したインポートエイリアスのエラー対処法をまとめます。

なお、今回は説明のためにテスト対象をapp/utils配下のTSファイルに限定しています。

Vueファイルのテストも実施する場合は、以下ページを参考に@nuxt/test-utilsなどを追加で導入してください。

実施環境

  • Node.js v22.18.0
  • パッケージマネージャ: pnpm
  • nuxt: v4.2.2
  • vitest: v4.0.16
  • @nuxt/eslint: v1.12.1

手順

まずVitestを依存関係に追加します。

> pnpm add -D vitest

npmやyarnなどを使っている場合は適宜読み替えてください

次に、以下のようにconfigファイルを作成します。

vitest.config.ts
import { defineConfig } from "vitest/config";
​
export default defineConfig({
  test: {
    globals: true,
    // 今回はテスト対象をTSファイルに限定しているため、nodeを指定
    environment: "node",
  },
});

これでひとまずの環境はできたので、テストファイルを作成してみます。

tests/utils/index.test.ts
import { expect, test } from "vitest";
import { formatNumber } from "@/utils/index";
​
test("formatNumber", () => {
  expect(formatNumber(1000)).toBe("1K");
  expect(formatNumber(1234567)).toBe("1.2M");
});

すると、2行目のインポート部分で、以下のようなエラーが発生します。

モジュール '@/utils/index' またはそれに対応する型宣言が見つかりません。

どうやらテストファイルでエイリアス(@)が上手く機能していないようです。

エラー原因

ここで注意すべきなのは、vitest.config.tsファイルにエイリアス設定をしても意味がないということです。

実際の原因は、tsconfig.jsonの設定でtestsディレクトリが型チェック対象になっていないためです。

ではtsconfig.jsonに"include": ["tests"]を追加すればよいのかというと、ここにもう1つ罠があります。

対処法

プロジェクトルート直下に配置されているtsconfig.jsonは、.nuxt/tsconfig.jsonを継承しています。

このincludeは、継承先であるプロジェクトルート直下のtsconfig.jsonでincludeを設定した場合、上書きになってしまいます。
決してマージしてくれる訳ではありません。

なので、ここでincludeを設定してしまうと、app配下のファイル群でインポートエラーが発生してしまいます。

では.nuxt/tsconfig.jsonのincludeで設定されているパスも含めて./tsconfig.jsonで設定し直せばよいかというと、まず数が多すぎますし、.nuxt配下のファイルは自動生成されるもののため、そのようなことはしたくありません。

ではどうするのが正解かというと、この.nuxt配下のファイル群の元となっているnuxt.config.tsに設定する、というものです。

以下のように設定を追加します。

nuxt.config.ts
export default defineNuxtConfig({
  ...
  typescript: {
    tsConfig: {
      // .nuxt/tsconfig.jsonからの相対パスを書く
      include: ["../tests/**/*.ts"],
    },
  },
});

上記の設定を追記できたら、ターミナルでpnpm devなどで開発サーバーを起動させ.nuxt配下を再生成させます。

すると、テストファイルでもエイリアスが効くようになったかと思います。

——「Vitest環境」これにて完成！

おわりに

Nuxt4からデフォルトのディレクトリ構造が変わり、ほとんどのファイルはapp配下に配置されるようになったため、以前と同じやり方では上手くいきませんでした。

そもそもtestsディレクトリをapp配下に置いていればこんな苦労はなかったかもしれませんが、参考になれば幸いです。

スポンサーリンク