2

Testing a trigger click on a button does not work in Vue using Jest. When I try to find the button in the wrapper the test passes, but when I try a trigger click on the same button so a method will be called it does not work.

Here is the vue file snapshot of the button:

<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>

Here is the js file that contains the simple method call::

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

Here is the .spec.js file for the test::

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();
  });
});

Please I will appreciate your assistance with this issue.

4
  • Try add await wrapper.vm.$nextTick() after trigger('click') Commented May 13, 2020 at 19:24
  • after trying this @Anatoly I still get same error... here is the error on the 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 | }); Commented May 14, 2020 at 7:44
  • did you try mount instead of shallowMount? Commented May 14, 2020 at 19:00
  • yes I did.. still same issue Commented May 15, 2020 at 12:49

2 Answers 2

2

The click handler isn't called immediately after trigger(), but rather it's called in the next tick. However, trigger() returns a Promise that resolves when the component is updated, so you could await the result of the call, as shown in the docs example:

it('clicked it', async () => {
  // ...
  await viewAppBtn.trigger('click')
  expect(viewAppointment).toBeCalled()
})
Sign up to request clarification or add additional context in comments.

2 Comments

after trying this @tony19 I still get same error... here is the error on the 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 Can you link to a reproduction?
0

I had a similar problem. I've used shallowMount to mount vue component and click on button wasn't working. The solution was to change shallowMount to mount.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.