The Vite Module Graph & On-Demand Transformation in Unit Testing

Vitest runs tests inside a Vite dev server context. To understand how Vitest evaluates test files, we must look at how Vite represents source code in memory through ModuleGraph and ModuleNode.

In Vite, every source file, stylesheet, or asset imported by your application corresponds to a ModuleNode inside Vite’s server instance.

// Simplified representation of Vite's internal ModuleNode
interface ModuleNode {
  url: string;
  file: string | null;
  type: 'js' | 'css';
  importers: Set<ModuleNode>;
  importedModules: Set<ModuleNode>;
  transformResult: TransformResult | null;
  ssrTransformResult: TransformResult | null;
  lastHMRTimestamp: number;
}

How Vitest Evaluates Test Files

When you execute vitest run src/components/Button.test.ts, Vitest sends a request to the Vite dev server’s SSR pipeline:

// Vitest triggers Vite's SSR load pipeline
const testModule = await viteServer.ssrLoadModule('/src/components/Button.test.ts');

Vite performs the following operations in order:

1. Resolution: Resolves aliases defined in vite.config.ts (e.g. @/components to src/components).
2. Loading: Reads the file content from disk or memory cache.
3. Plugin Transform: Runs the source code through all configured Vite plugins (Vue, React, Svelte, Tailwind).
4. Transpilation: Converts TypeScript, JSX, or TSX to standard JavaScript using esbuild in under 5 milliseconds.
5. Evaluation: Evaluates the transformed JavaScript inside a Node.js V8 context.

Source Code (.tsx) 
       |
       v
Vite Plugin Pipeline (React / Vue AST)
       |
       v
esbuild Fast Transpiler
       |
       v
Transformed JS Node Module
       |
       v
Vitest Test Context

Because Vite transforms code on demand, Vitest never transforms files that aren’t imported by the current test run. If you filter your test run down to a single file, Vitest only compiles that exact test and its immediate imports.