Как смоделировать магазин Vuex в VueJS test-utils parentComponent

Question

Я использую Jest с vue-test-utils, пытаясь проверить, реагирует ли дочерний компонент на событие $emit в родительском компоненте.

В библиотеке test-utils VueJS предусмотрена опция parentComponentпередается при монтировании / мелком монтировании компонента.

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

TypeError: Невозможно прочитать свойство 'state' из неопределенного

на фрагменте кода this.$store.state.something.here в родительском компоненте.

Как я могу там издеваться над хранилищем Vuex?

Компонентное крепление выглядит так:

const wrapper = shallowMount(ChildComponent, {
  store,
  localVue,
  parentComponent: ParentComponent,
  mocks: {
    $t: msg => msg,
  },
});

Есть идеи, как это решить?

Answer 1

Пробовал решение, предложенное Ричардом, но без особого успеха, хотя его догадка была верна.

Решение оказалось намного проще, чем я предполагал, я просто прекратил создание экземпляра Vuex.Store и просто высмеял $store в vue-test-utils config примерно так:

import { createLocalVue, shallowMount, config } from '@vue/test-utils';

config.mocks.$store = {
  state: {
    user: {
      sexy: true
    },
  },
};

Мне не нужно было использовать фактический экземпляр Vuex, так как мне нужно было только смоделировать фактические данные, чтобы это работало идеально.

Answer 2

Как вы создаете макет магазина?Это должно быть что-то вроде

const storeOptions = {
  state: {...},
  getters: {...},
  mutations: {...}
}
const mockStore = new Vuex.Store(storeOptions)

Поскольку this.$store не определено, я подозреваю, что вы просто передаете объект параметров в shallowMount.