Vitest中router-link点击无效且报history.state替换警告的解决方案

1. 替换路由历史模式为createMemoryHistory #

测试环境下使用createWebHistory会依赖浏览器原生history对象，容易触发状态不匹配警告。改用专为非浏览器/测试场景设计的createMemoryHistory即可消除该警告：

修改路由文件（src/router/index.mjs）：

import { createMemoryHistory, createRouter } from "vue-router";
import Home from "../components/Home.vue";
import Other from "../components/Other.vue";
const routes = [
  { path: '/', component: Home },
  { path:"/other", component: Other}
]
const router = createRouter({
  history: createMemoryHistory(),
  routes,
})
export {router as mainRoutes};

如果需要区分开发/测试环境，可添加环境判断：

import { createWebHistory, createMemoryHistory, createRouter } from "vue-router";
const router = createRouter({
  history: import.meta.env.VITEST ? createMemoryHistory() : createWebHistory(),
  routes,
})

2. 修正router-link路径大小写问题 #

路由配置中路径为小写的/other，但模板里的router-link写的是大写的/Other——Vue Router路径区分大小写，这直接导致点击后无法匹配路由，视图不更新。

修改App.vue模板：

<router-link class="other" to="/other">Go to elsewhere</router-link>

3. 调整测试代码的初始化与点击后逻辑 #

测试中需确保路由状态重置、点击后等待视图异步更新：

修改测试文件：

import { describe, it, beforeEach, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import { mainRoutes } from "../src/router/index.mjs";
import App from "../src/App.vue";
import { nextTick } from 'vue';

describe("App", ()=>{
  let wrapper;

  beforeEach(async ()=>{
    // 每次测试前重置路由到初始状态
    await mainRoutes.push('/');
    await mainRoutes.isReady();
    wrapper = mount(App, {
      global: {
        plugins: [mainRoutes]
      }
    });
  })

  it("Simple Click Test", async ()=>{
    await wrapper.find('.other').trigger('click');
    await nextTick(); // 等待Vue异步更新DOM
    await mainRoutes.isReady(); // 确保路由导航完成
    expect(wrapper.html()).toContain('I Think you should be somewhere else');
  })
})

问题根源总结 #

• 路径大小写不匹配：/Other无法匹配路由配置中的/other，导致点击后路由无变化
• createWebHistory适配问题：测试环境无真实浏览器history上下文，手动操作路由引发状态不一致警告
• 未等待异步更新：Vue DOM更新是异步的，点击后直接断言会错过视图渲染时机

内容的提问来源于stack exchange，提问作者Jackie