Pinia测试疑难：如何仅Mock单个Action验证Store逻辑

Store代码 #

const useStore = defineStore('store', () => {
  const id = ref('id');
  const forceId = ref('forceId');

  function shouldReturnForceId() {
    return false;
  }

  function getId() {
    if (shouldReturnForceId()) {
      return forceId.value;
    }
    return id.value;
  }

  return {
    id,
    forceId,
    shouldReturnForceId,
    getId,
  };
});

辅助函数 #

const createTestStore = (stubActions: boolean) => {
  const pinia = createTestingPinia({
    stubActions,
  });
  setActivePinia(pinia);

  const store = useStore();

  return store;
};

测试用例（原有无效/有效示例） #

describe('Pinia Test', () => {
  describe('getId', () => {
    // 无效：stubAction设为false并mock shouldReturnForceId
    it('should return forceId if shouldReturnForceId is true', () => {
        const store = createTestStore(false);
        store.shouldReturnForceId = jest.fn(() => true);
        expect(store.getId()).toEqual('forceId');
    });
    
    // 无效：stubAction设为true并mock shouldReturnForceId
    it('should return forceId if shouldReturnForceId is true', () => {
      const store = createTestStore(true);
      store.shouldReturnForceId = jest.fn(() => true);
      expect(store.getId()).toEqual('forceId');
    });
    
    // 有效
    it('should return id if shouldReturnForceId is false', () => {
      const store = createTestStore(false);
      expect(store.getId()).toEqual('id');
    });
  });
});

核心问题 #

如何在测试Pinia Store时仅Mock多个Action中的某一个？已知设置stubActions: true会Mock所有Action，但不符合需求。

解决方案 #

原有测试无效的核心原因是：setup写法的Pinia Store中，内部函数直接引用作用域内的原函数，而非store实例上的属性——你替换store实例的shouldReturnForceId方法，并不会影响getId内部调用的原函数逻辑。

要实现仅Mock单个Action，可借助createTestingPinia的actions选项精准指定需要Mock的方法：

方法1：修改辅助函数支持自定义Mock #

const createTestStore = (stubActions: boolean, customActions?: Record<string, any>) => {
  const pinia = createTestingPinia({
    stubActions,
    // 针对指定Store覆盖目标Action
    actions: customActions ? { store: customActions } : undefined,
  });
  setActivePinia(pinia);

  const store = useStore();

  return store;
};

// 对应测试用例
it('should return forceId if shouldReturnForceId is true', () => {
  // 仅Mock shouldReturnForceId，其余Action保留原有逻辑
  const store = createTestStore(false, {
    shouldReturnForceId: jest.fn(() => true)
  });
  expect(store.getId()).toEqual('forceId');
});

方法2：直接在测试中传入Mock配置 #

无需修改辅助函数，直接在测试用例中配置createTestingPinia：

it('should return forceId if shouldReturnForceId is true', () => {
  const pinia = createTestingPinia({
    stubActions: false,
    actions: {
      store: {
        shouldReturnForceId: jest.fn(() => true)
      }
    }
  });
  setActivePinia(pinia);
  const store = useStore();
  
  expect(store.getId()).toEqual('forceId');
});

原理说明 #

createTestingPinia的actions选项允许针对特定Store（这里是名为store的Store）替换指定Action的实现，既不需要全局Mock所有Action，又能精准控制目标方法的返回值，完美匹配测试需求。

内容的提问来源于stack exchange，提问作者Léo Coco