--changed detects all test files when router imports components (even with lazy loaded)

[rMonell]

Description:
When using --changed option with Vue Router, all test files are detected as changed when modifying any component, even though the router uses lazy-loaded imports (() => import(...)).

The dependency graph appears to consider lazy route imports as actual dependencies, causing the entire test suite to run.

Reproduction link

Steps to reproduce:

• Modify any component (e.g., UserCard)
• Run pnpm vitest list --changed --filesOnly
• Observed: All test files are listed
• Remove the routes from router.js) and commit
• Modify the same component again
• Run pnpm vitest list --changed --filesOnly
• Observed: Only the relevant test file is listed

Environment
Vitest: 4.0.18
Vite: 7.3.1
Vue: 3.5.29
Vue Router: 5.0.3
@vue/test-utils: 2.4.6
OS: Linux (WSL Ubuntu)
Node: v24.13.0

Question
Why does Vitest's --changed consider imports in the router as dependencies? Is there a way to configure Vitest to ignore these transitive dependencies or to make --changed smarter about component imports?

---

Workaround
I created a Vite plugin to virtualize route component imports, which breaks the dependency chain for --changed detection.

This feels like a hacky solution and I'm wondering if there's a more idiomatic way to solve this issue, or if Vitest could handle lazy imports differently out of the box.

import type { Plugin } from 'vite'

const PROXY_PREFIX = '\0virtual:route-component-proxy__'

export const virtualizeRouteComponents = (): Plugin => ({
  name: 'virtualize-route-components',
  enforce: 'pre',
  resolveId(source, importer) {
    if (!importer) {
      return null
    }

    const isRouteFile = importer.endsWith('/routes.ts') || importer.endsWith('/router/index.ts')

    if (!isRouteFile || !source.endsWith('.vue')) {
      return null
    }

    return PROXY_PREFIX + source
  },
  load(id) {
    if (id.startsWith(PROXY_PREFIX)) {
      return `export { default } from '${id.slice(PROXY_PREFIX.length)}'`
    }
    return null
  },
})

[chrisjcthomas]

This happens because Vite's module graph (server.moduleGraph) registers both static import statements and dynamic () => import(...) calls as module dependencies.

When Vitest runs with --changed, it inspects the module graph and walks upward through importers to find all test files that depend on the changed file.

The dependency chain looks like this:
UserCard.vue -> router.js -> (any shared helper, layout, or test importing the router)

Because router.js imports every page component, any test that imports router.js (directly or through an app wrapper) is treated as a downstream dependent of every single component in that router.

How to handle this cleanly

The standard fix is to isolate your component tests from the global route tree:

1. Use a lightweight test router in component tests:
   Instead of mounting components with the full production router, create a local memory router containing only the route needed for that test:

import { createRouter, createMemoryHistory } from 'vue-router';
import { mount } from '@vue/test-utils';
import UserCard from './UserCard.vue';

const testRouter = createRouter({
  history: createMemoryHistory(),
  routes: [{ path: '/users/:id', component: UserCard }],
});

const wrapper = mount(UserCard, {
  global: { plugins: [testRouter] },
});

2. Mock the router if testing components that only need routing helpers:
   If a component only uses useRoute() or useRouter(), mock vue-router in that test rather than importing your app's router instance:

vi.mock('vue-router', () => ({
  useRoute: () => ({ params: { id: '123' } }),
  useRouter: () => ({ push: vi.fn() }),
}));

Keeping production router imports out of individual unit tests stops the module graph from linking every component change back to the entire test suite.