source

Jest vue-multicelect에서 vuex 작업을 테스트할 때 모의 함수가 호출되어야 합니다.

factcode 2022. 10. 14. 22:38
반응형

Jest vue-multicelect에서 vuex 작업을 테스트할 때 모의 함수가 호출되어야 합니다.

구성 요소의 v-model에서 디스패치 작업을 테스트하는 데 문제가 있습니다.멀티셀렉트가 있는데 값이 변경될 때마다 디스패치액션이 실행됩니다.선택한 값은 na Vuex 스토어에 저장되어 있기 때문입니다.멀티 셀렉트로 값이 선택된 후 디스패치 액션이 호출되었는지 테스트하고 싶습니다.

<multiselect
      v-model="subdivision"
      :options="options"
      :multiple="false"
      :close-on-select="true"
      :clear-on-select="false"
      :preserve-search="false"
      placeholder="Please select"
      label="name"
      track-by="name"
      :preselect-first="false"
      selectedLabel="✓"
      deselectLabel="×"
      selectLabel=" "
      ref="myMultiselect"
      id="multiselectId"
    ></multiselect>

     computed: {
       subdivision: {
         set(value) {
           this.$store.dispatch("subdivision", value);
       },
        get(value) {
           return this.$store.state.subdivision;
       }
     }
    }

이것이 테스트입니다.

describe('Value change of subdivision', () => {
  let multiselect;
  let cmp2;
  let actions;
  let mutations;
  let state;
  let getters;

  beforeEach(() => {
    actions = {
      subdivision: jest.fn()
    };
    state = storeConfig.state;
    mutations = storeConfig.mutations;
    getters = storeConfig.getters;
    store = new Vuex.Store({ state, getters, mutations, actions });

    cmp2 = shallowMount(MyComponent, {
      store,
      localVue,
      router
    });
  })

  it('Select value should dispatch action', () => {
    let multiselect = cmp2.find({ ref: 'myMultiselect' });
    multiselect.trigger('input',subdivisions[1]);
    expect(actions.subdivision).toHaveBeenCalled();
  })
})

안 돼.다음과 같은 에러가 발생.

expect(jest.fn()).toHaveBeenCalled()
Expected mock function to have been called.

뭐가 문제죠?제발 도와주세요.

문제는 입력 이벤트가 트리거되지 않았다는 것입니다.입력 이벤트는 컴포넌트 커스텀이벤트이기 때문에 트리거가 동작하지 않습니다.

multiselect.trigger('input',subdivisions[1]);  // <-- wrong

v-model을 사용하여 vue-multicelect에서 이벤트를 트리거하는 올바른 방법은 다음과 같습니다.

multiselect = wrapper.find({ ref: 'myMultiselect' });
let obj = { value: 12122, name: 'Hans Peter' };
multiselect.vm.$emit('input', obj );

언급URL : https://stackoverflow.com/questions/58684872/jest-expected-mock-function-to-have-been-called-on-testing-vuex-actions-in-vue-m

반응형