Как получить доступ к пространству имен Vuex в модульном тесте Mocha - PullRequest
Новая
       17

Как получить доступ к пространству имен Vuex в модульном тесте Mocha

2 голосов
/ 30 мая 2019

Я создаю новый компонент Vue, который использует получатель имен Vuex с пространством имен для доступа к списку имен столбцов. Фактический компонент компилируется и запускается.

В моих модульных тестах Mocha я создал фиктивный геттер, который возвращает список строк с именем "allColumns". Когда я запускаю модульные тесты, во время ShallowMount методы компонента пытаются получить доступ к this.allColumns во время инициализации, но значение всегда неопределено. Я вижу нужное значение в этом. $ Store.getters.allColumns, но оно не отображается на this.allColumns, как при открытии страницы в браузере.

Существует много информации о том, как макетировать геттеры в тесте и как использовать mapGetters с пространством имен, но я не нашел никакой документации о геттерах с пространством имен в тесте Mocha.

test.spec.js 

  let propsData;
  let getters;
  let store;

  beforeEach(() => {
    debugger;
    propsData = {
      players: samplePlayerObject,
      metadata: sampleMetadataObject
    };

    getters = {
      allColumns: () => ["playerid","last","first","birthday","height"]
    }

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

  it('initializes the component', () => {
    const wrapper = shallowMount(PlayerFilterTable, { propsData, localVue, store });
  });

компонент Vue 


<template>
  <div class="player-filter-table">
    <table>
      <tr>
         <th v-for="(key, index) in GetColumns()" 
            v-bind:id="'header-' + key" 
            v-bind:key="index"
            @click="HeaderClick(key)"
          >...</th>
      </tr>
    </table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    ...mapGetters({
      allColumns: 'playerFilter/allColumns'
    })
  },
GetColumns() {
  // this.allColumns is defined when running in browser, but undefined when loaded from a Mocha test
  return this.allColumns.filter(column => [*some filter criteria*]);
}
</script>

Когда shallowMount запускается в test.spec.js, я ожидаю, что компонент успешно загрузится, а затем продолжит выполнение моих тестов, но вместо этого я получаю сообщение об ошибке TypeError: Невозможно прочитать свойство filter из undefined, потому что это. allColumns не определена.

1 Ответ

1 голос
/ 31 мая 2019

Используйте modules с namespaced: true: 

import { createLocalVue, shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import PlayerFilterTable from '~/whatever';

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

let propsData, getters, store, wrapper, consoleSpy;

describe('PlayerFilterTable', () => {

  beforeEach(() => {
    consoleSpy = jest.spyOn(console, 'error');
    propsData = {
      players: samplePlayerObject,
      metadata: sampleMetadataObject
    };
    getters = {
      allColumns: () => ["playerid", "last", "first", "birthday", "height"]
    };
    store = new Vuex.Store({
      modules: {
        playerFilter: {
          namespaced: true,
          getters
        }
      }
    });
    wrapper = shallowMount(PlayerFilterTable, {
      propsData,
      localVue,
      store
    });
  });

  afterEach(() => {
    expect(consoleSpy).not.toHaveBeenCalled();
  });

  it('should render correctly', () => {
    expect(wrapper.is(PlayerFilterTable)).toBe(true);
    expect(wrapper.html()).toMatchSnapshot();
  })
})

Если вы используете геттеры из более чем одного модуля, вы можете сгруппировать их под разные реквизиты getters и назначить каждому модулю соответственно.

...