I am currently writing tests for my Vue application. I have a button which calls a logout function. I just want to test if the function gets called when the button gets clicked.

I have tried to mock the function with jest.fn() but i cant get it to work. I also tried to actually trigger the method and put a console.log in the method but that log did not get called. What am I doing wrong?

this is my wrapper setup:

let wrapper;

beforeEach(() => {
    Vue.use(Vuetify);
    Vue.prototype.$router = new VueRouter();
    wrapper = shallowMount(Navigation);
});

afterEach(() => {
    wrapper.destroy();
});

it('should call logout function on button click', function() {
        let submitLogoutMock = jest.fn();
        wrapper.vm.submitLogout = submitLogoutMock;

        wrapper
            .find('#logout-button')
            .trigger('click');

        expect(submitLogoutMock).toHaveBeenCalled();
    });

I expect the mocked method to be called but actually i get an error saying:

Error: expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called, but it was not called.

I am currently writing tests for my Vue application. I have a button which calls a logout function. I just want to test if the function gets called when the button gets clicked.

I have tried to mock the function with jest.fn() but i cant get it to work. I also tried to actually trigger the method and put a console.log in the method but that log did not get called. What am I doing wrong?

this is my wrapper setup:

let wrapper;

beforeEach(() => {
    Vue.use(Vuetify);
    Vue.prototype.$router = new VueRouter();
    wrapper = shallowMount(Navigation);
});

afterEach(() => {
    wrapper.destroy();
});

it('should call logout function on button click', function() {
        let submitLogoutMock = jest.fn();
        wrapper.vm.submitLogout = submitLogoutMock;

        wrapper
            .find('#logout-button')
            .trigger('click');

        expect(submitLogoutMock).toHaveBeenCalled();
    });

I expect the mocked method to be called but actually i get an error saying:

Error: expect(jest.fn()).toHaveBeenCalled()

Expected mock function to have been called, but it was not called.

• javascript
• vue.js
• triggers
• jestjs
• vue-test-utils

Share Improve this question Follow edited Oct 14, 2019 at 12:05 Husam Elbashir 7,19733 gold badges1919 silver badges3131 bronze badges asked Oct 14, 2019 at 11:54 baxter3000baxter3000 2111 gold badge11 silver badge33 bronze badges 3

• Verify whether your ponent is listening for a custom click event or a native one, because right now it looks like you're triggering a native click event. – Husam Elbashir Commented Oct 14, 2019 at 12:07
• <v-btn icon id="logout-button" @click.native="logout"> I tried researching again and added the .native and now my test works.. can you explain why i dont really understand the difference between a native and a normal click – baxter3000 Commented Oct 14, 2019 at 12:28
• .native modifier listens for native DOM events, such as a click event emitted by a button element. By default when you use v-on or the@ shorthand vue listens for custom events, ones you trigger using $emit. – Husam Elbashir Commented Oct 14, 2019 at 13:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

When using shallowMount the methods of ponent should be stubbed. You can achieve this while creating the wrapper or by using setMethods().

You only need to change your unit test:

  it('should call logout function on button click', () => {
    const submitLogoutMock = jest.fn();
    wrapper.setMethods({ submitLogout: submitLogoutMock });

    wrapper.find('#logout-button').trigger('click');

    expect(submitLogoutMock).toHaveBeenCalled();
  });