javascript - 单元测试依赖于其他 getter 的 Vuex getter

Question

我已经设法测试了与其他代码隔离的 Vuex getter。当 getter 依赖于其他 getter 时，我现在面临一些问题，请参见以下示例:

getters.js

export const getters = {

  getFoo(state) => prefix {
    return `${prefix}: ${state.name}`;
  },

  getFancyNames(state, getters) {
    return [
      getters.getFoo('foo'),
      getters.getFoo('bar')
    ]
  }
}

getters.spec.js

import { getters } = './getters';

const state = {
  name: 'stackoverflow'
};

describe('getFoo', () => {

  it('return name with prefix', () => {
    expect(getters.getFoo(state)('name')).toBe('name: stackoverflow');
  });

});

describe('getFancyNames', () => {

  // mock getters
  const _getters = {
    getFoo: getters.getFoo(state)
  }

  it('returns a collection of fancy names', () => {
    expect(getters.getFancyNames(state, _getters)).toEqual([
      'foo: stackoverflow',
      'bar: stackoverflow'
    ]);
  });
});

当被测试的 getter 依赖于其他具有参数的 getter 时，这意味着我在模拟中引用了原始的 getter.getFoo，这打破了模拟的想法，因为测试开始彼此有关系。当 setter/getter 增长时，依赖图有多个级别，这会使测试变得复杂。

也许这是要走的路，只是想检查一下我没有遗漏任何东西......

Answer 1

我同意你的看法，在你的模拟中引用实际的合作者会破坏模拟的目的。因此，我会直接返回您希望合作者返回的任何内容。

在你的例子中，不要做这样的事情:

// mock getters
const _getters = {
  getFoo: getters.getFoo(state)
}

您只需输入 getters.getFoo(state) 将返回的任何内容:

const _getters = {
    getFoo: 'foobar' 
}

如果您有一个接受额外参数的 getter，您只需返回一个返回常量的函数:

const _getters = {
    getFoo: x => 'foobar',
}