Mocha 단위 테스트에서 이름에 접근하는 방법이 Vuex getter를 능가했다.

Mocha 단위 테스트에서 이름에 접근하는 방법이 Vuex getter를 능가했다.

나는 이름이 앞서는 Vuex getter를 사용하여 열 이름 목록에 액세스하는 새로운 Vue 구성 요소를 만들고 있다.실제 구성 요소는 컴파일하여 실행한다.

나의 모카 단위 시험에서, 나는 "올컬럼스"라고 불리는 문자열 목록을 반환하는 모의 게터를 만들었다.장치 테스트를 실행하면 LumpMount 중에 구성 요소의 메서드가 초기화하는 동안 이 .allColumns에 액세스하려고 하지만 값은 항상 정의되지 않는다.이 안에서 내가 원하는 가치를 알 수 있다.$store.getters.allColumns, 그러나 이것은 여기에 매핑되지 않고 있다.모든Columns는 내가 브라우저에서 페이지를 열 때 그렇게 한다.

시험에서 게이터를 조롱하는 방법과 네임스페이스가 있는 맵게이터를 사용하는 방법에 대한 많은 정보가 있지만, 나는 모카 테스트에서 이름 앞지른 게터에 대한 문서를 찾지 못했다.

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>

test.spec.js에서 tellpleMount를 실행할 때 구성 요소가 성공적으로 로드된 다음 계속 테스트를 실행할 것으로 예상하지만, 대신 TypeError: this.allColumns가 정의되지 않았기 때문에 정의되지 않은 속성의 '필터'를 읽을 수 없다는 오류가 표시된다.

사용하다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그리고 그에 따라 각 모듈에 할당한다.

참조URL: https://stackoverflow.com/questions/56385464/how-to-access-namespaced-vuex-getters-in-mocha-unit-test