Question

我正在Vue中从事调查构建器的工作，并将用户创建的调查问题提交给Vuex，以便以后可以像这样检索它们：

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

pageNumber是组件接收的道具，inputs()返回一系列问题。这一切似乎都可以在屏幕上呈现正确的问题，但是我在进行Jest测试时遇到了麻烦。

为了进行测试，我希望可以像下面的尝试一样用吸气剂模拟商店（省略一些部分）：

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

商店的吸气剂就像组件上的计算属性一样，它们是使用函数定义的，但是可以作为属性访问，而没有括号。

给出这一行：

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

您的questions的获取者似乎正在返回接受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，因为我假设您的测试方法已被硬编码以返回正确的问题数组。

您不妨参考此吸气剂的非测试版本，因为我希望它会返回额外的功能。

Vuex和Jest-this。$ store.getters。<gettername>不是函数

1 个答案: