Vuex с Jest - это. $ Store.getters. <getterName>не является функцией - PullRequest
Новая
       10

Vuex с Jest - это. $ Store.getters. <getterName>не является функцией

0 голосов
/ 28 августа 2018

Я работаю над создателем опроса в 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":[]}].

Так что я думаю, что могу быть совершенно недоразумением. Может ли кто-нибудь указать мне правильное направление?

1 Ответ

0 голосов
/ 28 августа 2018

Получатели хранилища аналогичны вычисленным свойствам компонентов, они определяются с помощью функций, но доступны как свойства без скобок.

С учетом этой строки: 

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

может показаться, что ваш questions получатель возвращает функцию, которая принимает pageNumber. Это не то, что вы сейчас определяете в своем тестовом геттере, вы просто возвращаете массив.

Так что либо вызов нужно изменить, чтобы использовать квадратные скобки: 

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

или получатель должен вернуть функцию: 

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, поскольку я предполагаю, что ваш получатель теста жестко запрограммирован для возврата правильного набора вопросов.

Возможно, вы захотите проконсультироваться с нетестовой версией этого геттера, так как я ожидаю, что вы увидите, что он возвращает дополнительный уровень функции.

...