vue.js - Vuex with Jest - this.$store.getters. 不是函数

Question

我正在 Vue 中开发调查生成器，用户创建的调查问题已提交给 Vuex，以便稍后可以像这样检索它们:

computed: {
  inputs() {
    return this.$store.getters.questions(this.pageNumber);
  },
},

pageNumber 是组件接收的 Prop ，inputs() 返回问题数组。这一切似乎都可以在屏幕上呈现正确的问题，但我在 Jest 测试中遇到了问题。

为了测试，我希望我可以像下面的尝试那样用 setter/getter 模拟商店(省略一些部分):

const localVue = createLocalVue();
localVue.use(Vuex);

beforeEach(() => {
  state = {
    survey: {
      pages: [
        // pages objects
      ],
    },
  };

  getters = {
    questions: () => [
      { type: 'Radio', config: { label: 'Test label', options: [{ label: 'Test option label' }] }, validation: [] },
    ],
  };

  store = new Vuex.Store({
    state,
    getters,
  });
});

但这会导致错误:

TypeError: this.$store.getters.questions is not a function

但是，从 getters.questions 中删除箭头函数会给我:

[vuex] getters should be function but "getters.questions" is [{"type":"Radio","config":{"label":"Test label","options":[{"label":"Test option label"}]},"validation":[]}].

所以我想我可能完全误解了。有人能指出我正确的方向吗？

Answer 1

store 的 getter 就像组件上的计算属性，它们是使用函数定义的，但作为属性访问，没有括号。

鉴于这一行:

return this.$store.getters.questions(this.pageNumber);

看起来您的questions getter 正在返回一个接受pageNumber 的函数。这不是您当前在测试 getter 中定义的内容，您只是返回一个数组。

因此调用需要更改为使用方括号:

return this.$store.getters.questions[this.pageNumber];

或者 getter 需要返回一个函数:

getters = {
    questions: () => () => [
        { type: 'Radio', config: { label: 'Test label', options: [{ label: 'Test option label' }] }, validation: [] }
    ]
};

如果有助于澄清，这等同于:

getters = {
    questions: function () {
        return function () {
            const questions = [
                { type: 'Radio', config: { label: 'Test label', options: [{ label: 'Test option label' }] }, validation: [] }
            ];

            return questions;
        };
    }
};

请注意，我完全忽略了传递的 pageNumber，因为我假设您的测试 getter 已硬编码以返回正确的问题数组。

您可能希望引用此 getter 的非测试版本，因为我希望您会看到它返回一个额外级别的功能。