如何对依赖其他getter的Vuex getter进行单元测试

我懂你现在的困扰——单独测试getFoo完全没问题，但碰到依赖它的getFancyNames就卡壳了。其实核心就是要给这类依赖型getter正确传入getters上下文参数，下面给你两种实用的解决方案：

方案1：模拟依赖的Getter（隔离测试） #

这种方式适合单独验证getFancyNames的逻辑，不用关心getFoo的具体实现，只需要确认它正确调用了依赖的getter即可。

import { getters } from './getters';

const state = { name: 'stackoverflow' };

describe('getFancyNames', () => {
  it('正确调用getFoo生成名称数组', () => {
    // 模拟getFoo的返回逻辑
    const mockGetFoo = jest.fn((prefix) => `${prefix}: mockName`);
    // 构建模拟的getters集合
    const mockGetters = {
      getFoo: mockGetFoo
    };

    // 调用目标getter，传入state和模拟的getters
    const result = getters.getFancyNames(state, mockGetters);

    // 验证输出结果是否符合预期
    expect(result).toEqual(['foo: mockName', 'bar: mockName']);
    // 验证getFoo的调用次数和参数是否正确
    expect(mockGetFoo).toHaveBeenCalledTimes(2);
    expect(mockGetFoo).toHaveBeenNthCalledWith(1, 'foo');
    expect(mockGetFoo).toHaveBeenNthCalledWith(2, 'bar');
  });
});

方案2：使用真实的Getter（整合测试） #

如果你想验证整个依赖链的正确性（比如确认getFoo和getFancyNames配合工作时结果无误），可以直接传入真实的getters对象：

import { getters } from './getters';

const state = { name: 'stackoverflow' };

describe('getFancyNames', () => {
  it('返回正确的格式化名称数组', () => {
    // 构建包含真实getFoo的getters集合
    // 注意：getFoo是柯里化函数，需要先传入state拿到接收prefix的实际函数
    const realGetters = {
      getFoo: getters.getFoo(state)
    };

    // 调用目标getter
    const result = getters.getFancyNames(state, realGetters);

    // 验证最终输出是否符合预期
    expect(result).toEqual(['foo: stackoverflow', 'bar: stackoverflow']);
  });
});

小提醒 #

这里容易踩坑的点是getFoo是柯里化函数（(state) => (prefix) => ...），所以在组装getters对象时，必须先传入state拿到真正接收prefix的函数，不然会导致调用失败。

内容的提问来源于stack exchange，提问作者a--m