如何在Vue3中用Vitest测试依赖Reactivity API的组件并Mock Store

针对你这种直接导出reactive对象作为store的场景，有两种实用的Mock方式：

1. 用Vitest全局Mock整个store模块 #

直接通过vi.mock替换store模块的导出内容，给组件提供测试所需的模拟数据：

import { expect } from "vitest";
import { reactive } from 'vue';
import ComponentA from './ComponentA.vue';

// 模拟store模块，返回预设好的测试数据
vi.mock('./store.js', () => ({
  store: reactive({
    count: 10
  })
}));

test("显示正确的count值", async () => {
  const view = customRender(ComponentA);
  expect(await view.findByText("10")).toBeInTheDocument();
});

2. 动态可修改的Mock（适合多场景测试） #

如果需要在测试过程中动态修改store的值，可以在mock里返回一个可访问的响应式对象：

import { expect } from "vitest";
import { reactive } from 'vue';
import ComponentA from './ComponentA.vue';

// 创建可修改的mock store
const mockStore = reactive({ count: 0 });

vi.mock('./store.js', () => ({
  get store() {
    return mockStore;
  }
}));

test("显示正确的count值", async () => {
  // 动态设置测试所需的值
  mockStore.count = 10;
  const view = customRender(ComponentA);
  expect(await view.findByText("10")).toBeInTheDocument();
});

关键注意点 #

• 模拟的store必须是reactive对象，这样组件才能响应数据变化，符合原代码的响应式逻辑。
• 你的customRender需基于Vue Testing Library等工具封装，确保能正确渲染Vue组件。

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