vitest failed to resolve import in tests

TL;DR

Vitest resolves like Vite, not like Jest. Mirror your Vite aliases in the Vitest config, include the right extensions, and check whether the dependency needs inlining.

Error

Error: Failed to resolve import "@/components/Button" from "src/App.test.tsx". Does the file exist?

Steps

1. Check vitest.config.ts (or vite.config.ts test block) for resolve.alias matching your tsconfig paths. Expected: @ maps to src.
2. If the import is a bare package that fails, try deps.inline: [/problem-lib/] or deps.web.transformAssets. Expected: the dependency is processed instead of externalized.
3. Check file extensions: Vitest needs the real extension or a configured one. Expected: imports use extensions Vite understands.
4. Clear the Vite cache (node_modules/.vite) and re-run. Expected: stale pre-bundling is ruled out.

5- Re-run the single test file. Expected: the import resolves.

When to use

• Failed to resolve import in Vitest specifically.
• The same import works in the dev server.

When not to use

• Jest resolution errors (different resolver).
• Runtime undefined after a successful import (different bug).

Tool compatibility

• Vitest 0.30 through latest; Vite 4/5.

Variant phrasings

Vitest cannot find module @/...

Alias misconfiguration; the most common cause.

Vitest failed to resolve import of .css

CSS handling in tests; check css: false or mocks.

Why it happens

Vitest reuses Vite's resolver, which differs from both Node and Jest in alias handling, extension rules, and dependency externalization.

Edge cases

• deps.interopDefault fixes default-import interop for CJS deps.
• Monorepo workspace deps need aliases per package.
• environment: 'jsdom' vs 'node' changes which globals exist, not resolution, but the errors look similar.

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_SJh0f4Rk6l-rMBpQsRuy9Q