【Vitest】failed to resolve import in '@/...'

エラー

'failed to resolve import in '@/...'

Next.jsとVitestとReact Testing Libraryで構成されているプロジェクトでテストを実装したところ、上記のエラーが出ました。

背景

初めてVitestを触ったときにはまったエラーです。そもそもプロジェクトにVitestが入っていなかったことやテスト自体触るのも初めてだったため詰まりました。

解決策

vitest.config.ts

import { resolve } from 'node:path'

resolve: {
  alias: [{ find: '@', replacement: resolve(__dirname, './src') }]
}

Next.js上で定義されているエイリアス("@/...")はVitestでは読み込むことができないため、起きるエラーでした。そのため、Vitestがパスを理解できるようVitest上で'@'を'./src'ディレクトリにマッピングすることで解決できます。