Модульный тест: как я могу правильно запустить событие запуска на входе, который вызывает функцию в vuex?

#unit-testing #vue.js #vuex #bootstrap-vue #ts-jest

#модульное тестирование #vue.js #vuex #bootstrap-vue #ts-jest

Вопрос:

у меня есть этот загрузочный компонент vue:

   <b-form-input
    v-model="currentUser.name"
    placeholder="Name *"
    name="name"
    @input="checkSubmitStatus()"
  ></b-form-input>
  

checkSubmitStatus в методах переходит к вызову updateSubmitDisabled, который у меня есть в мутациях внутри другого файла:

  methods: {
...mapMutations({
  updateSubmitDisabled: "updateSubmitDisabled"
}),

 checkSubmitStatus() {
   const isDisabled = this.currentUser.name.length === 0;
   this.updateSubmitDisabled(isDisabled);
 }
}
  

это .spec.js файл:

  import { createLocalVue, mount } from "@vue/test-utils";
 import Vue from "vue";
 import Vuex from 'vuex';
 import UserForm from "@/components/event-created/UserForm.vue";
 import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";

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

 describe("UserForm.vue", () => {
   let mutations;
   let store;

   beforeEach(() => {
     mutations = {
       updateSubmitDisabled: jest.fn()
     };

     store = new Vuex.Store({
       state: {
         currentUser: {
           name: 'pippo',
         }
       },
       mutations
     });
   })

   it("should call the updateSubmitDisabled mutation", async () => {
     const wrapper = mount(UserForm, { localVue, store });

     const input = wrapper.get('input[name="name"]');

     await Vue.nextTick();
     input.element.value = 'Test';
     await input.trigger('input');
     await Vue.nextTick();

     expect(mutations.updateSubmitDisabled).toHaveBeenCalled();
   });
 });
  

на данный момент я просто хочу проверить, вызывается ли «updateSubmitDisabled» для «name», но в результате тест говорит:
Ожидаемое количество вызовов:> = 1
Количество полученных вызовов: 0

Комментарии:

1. Можете ли вы создать консоль. войдите в checkSubmitStatus, чтобы узнать, было ли это вызвано?

Ответ №1:

Я, наконец, согласился с:

  it("should call the updateSubmitDisabled mutation", () => {
  const wrapper = mount(UserForm, { localVue, store });
  const input = wrapper.get('input[name="name"]');
  input.element.dispatchEvent(new Event('input'));
  expect(mutations.updateSubmitDisabled).toHaveBeenCalled();
 });