使用 Jest 在 Vue 中测试按钮上的触发器单击不起作用答案

【问题标题】：Testing a trigger click on a button does not work in Vue using Jest使用 Jest 在 Vue 中测试按钮上的触发器单击不起作用
【发布时间】：2020-08-30 02:19:30
【问题描述】：

使用 Jest 在 Vue 中测试按钮上的触发器单击不起作用。当我尝试在包装器中找到按钮时，测试通过了，但是当我尝试触发单击同一个按钮时，将调用一个方法，但它不起作用。

这里是按钮的vue文件快照：

<v-btn @click="viewAppointment(appointment)" class="ma-2" dark small color="orange" id="view-appointment" data-viewAppointmentBtn>
  <v-icon left>mdi-eye</v-icon>
  <span>View</span>
</v-btn>

这里是包含简单方法调用的js文件::

viewAppointment(appointment) {
  this.appointment = appointment;
  this.viewAppointmentDialog = !this.viewAppointmentDialog;
},

这是用于测试的 .spec.js 文件::

import './setup.js';
import CoachAppointmentsRequests from '../dashboard/coach/appointments/requests/overview/Overview.vue';
import {shallowMount, createLocalVue} from "@vue/test-utils";
import Vuex from "vuex";

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

describe("CoachAppointmentsRequests", () => {

  let wrapper;
  let store;
  let actions;
  let state;
  let getters;

  const $route = {
    path: 'appointment/requests/:application_id',
    params: { application_id: 123 }
  }

  actions = {
    GET_USER_APPOINTMENTS: jest.fn()
  };
  state = {
    user_appointments: [ {id:1, date: 'May 20, 2020'} ],
    all_user_appointments: [ {id:1, date: 'May 20, 2020'} ],
  };
  getters = {
    user_appointments: state => state.user_appointments,
    all_user_appointments: state => state.all_user_appointments
  };
  store = new Vuex.Store({
    actions,
    getters,
    state,
  });

  const getUserAppointments = jest.fn(() => {
    return new Promise(resolve => {
      process.nextTick(() => {
        resolve({
          data: [
            { id:1, appointee_id:2}
          ]
        })
      })
    })
  });

  beforeEach(() => {
    wrapper = shallowMount(CoachAppointmentsRequests, {
      propsData: {},
      mocks: {
        $route,
      },
      stubs: {},
      methods: {
        getUserAppointments,
      },
      store,
      localVue,
    });
  });

  it('click on the view appointment button calls the viewAppointment method', () => {
    const viewAppointment = jest.fn();
    wrapper.setMethods({ viewAppointment })
    const viewAppBtn = wrapper.find('#view-appointment');
    viewAppBtn.trigger('click');
    expect(viewAppointment).toBeCalled();
  });
});

感谢您在此问题上的帮助。

【问题讨论】：

尝试在 trigger('click') 后添加 await wrapper.vm.$nextTick()
在尝试这个@Anatoly 之后我仍然得到同样的错误...这是 CLI 上的错误...expect(jest.fn()).toBeCalled() Expected number of calls: >= 1 Received number of calls: 0 70 | viewAppBtn.trigger('click'); 71 | await wrapper.vm.$nextTick(); > 72 | expect(viewAppointment).toBeCalled(); | ^ 73 | });
你试过 mount 而不是 shallowMount 吗？
是的，我做到了.. 还是同样的问题

标签： unit-testing vue.js jestjs buttonclick

【解决方案1】：

click 处理程序不会在trigger() 之后立即调用，而是在下一个滴答时调用。不过trigger()会返回一个Promise，当组件更新时会解析，所以你可以await调用结果，如docs example所示：

it('clicked it', async () => {
  // ...
  await viewAppBtn.trigger('click')
  expect(viewAppointment).toBeCalled()
})

【讨论】：

在尝试这个@tony19 之后我仍然得到同样的错误...这是 CLI 上的错误...expect(jest.fn()).toBeCalled() Expected number of calls: >= 1 Received number of calls: 0 70 | viewAppBtn.trigger('click'); 71 | await wrapper.vm.$nextTick(); > 72 | expect(viewAppointment).toBeCalled(); | ^ 73 | });
@Techbola 你能链接到复制品吗？

【解决方案2】：

我遇到了类似的问题。我使用shallowMount 挂载vue 组件并单击按钮不起作用。解决方案是将shallowMount 更改为mount。

【讨论】：