Vue 3 Pina测试：如何Mock被依赖的Store

要Mock被依赖的useStore1并验证useStoreTwo的value getter，你可以借助测试框架（Vitest/Jest）的模块Mock功能，直接替换useStore1的导出，返回一个包含预期getter的模拟实例。

第一步：修正原代码的语法与逻辑问题 #

先补全Store定义的闭合括号，同时修正useStoreTwo中字符串拼接的错误（缺少空格）：

// store1.js
import { defineStore } from 'pinia';

export const useStore1 = defineStore({
  id: 'store1',
  state: () => ({
    someName: 'blarg',
  }),
  getters: {
    name: (state) => state.someName,
  },
});

// store2.js
import { defineStore } from 'pinia';
import { useStore1 } from './store1';

export const useStoreTwo = defineStore({
  id: 'store2',
  state: () => ({
    someValue: 'bar',
  }),
  getters: {
    value: (state) => {
      const store1 = useStore1();
      return `${store1.name} ${state.someValue}`;
    },
  },
});

第二步：编写测试用例（以Vitest为例） #

使用vi.mock替换store1模块，让useStore1返回模拟的Store对象，同时确保测试环境激活Pinia实例：

import { useStoreTwo } from '@/stores/store2';
import { createPinia, setActivePinia } from 'pinia';
import { vi } from 'vitest';

// Mock store1模块，指定useStore1的返回值
vi.mock('@/stores/store1', () => ({
  useStore1: vi.fn(() => ({
    name: 'foo', // 模拟getter返回预期值
  })),
}));

describe('useStoreTwo', () => {
  beforeEach(() => {
    // 初始化Pinia实例，确保Store能正确创建
    setActivePinia(createPinia());
  });

  it('should return "foo bar" when store1.name is mocked to "foo"', () => {
    const store2 = useStoreTwo();
    expect(store2.value).toBe('foo bar');
  });
});

Jest环境下的调整 #

如果使用Jest，只需将vi替换为jest即可：

import { useStoreTwo } from '@/stores/store2';
import { createPinia, setActivePinia } from 'pinia';

jest.mock('@/stores/store1', () => ({
  useStore1: jest.fn(() => ({
    name: 'foo',
  })),
}));

// 测试逻辑与Vitest一致

核心要点 #

• 模块Mock会完全替换原useStore1的导出，无需关心原Store的实现细节，只需提供测试所需的依赖属性。
• 测试前必须激活Pinia实例，否则无法正确初始化目标Store。
• 模拟对象只需包含目标Store依赖的部分（这里是name getter），不需要完整实现Store的所有方法和状态。

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