Spying on methods when using the composition api

[maurer2]

Hello, it seems that when using the options api, it is recommended to create spies for methods before mounting to avoid issues with event handlers that don't have braces (example 1, example 2, example 3).
How would one do the same with the composition api? The following doesn't work, as methods isn't available/exposed when using the composition api?

const spy = jest.spyOn(ComponentName.methods, 'methodName');
// mount stuff
expect(spy).toHaveBeenCalled()

Thanks

Cheers

[cexbrayat]

I think you should be able to do something like:

const wrapper = mount(ComponentName);
const spy = (wrapper.vm.methodName = jest.fn());
await wrapper.get('button').trigger('click');
expect(spy).toHaveBeenCalled();

Feel free to reopen this issue with a concrete example if that doesn't work, but I think I've used this pattern several times with success.

[maurer2]

Hello, thanks for looking into this. I created an example project with tests to demonstrate the issue (https://github.com/maurer2/vue3-testing-question). I have two two buttons that have click event handlers. One with parentheses and one without.

 <ButtonComponent
      id="button-2a"
      @click="handleClick1"
/>
    
<ButtonComponent
      id="button-2b"
      @click="handleClick2()"
/>

The second click handler can be tested like so:

  it('button2 triggers counter update function when clicked', async () => {
    const spy = jest.spyOn(cmp.vm, 'handleClick2');

    await cmp.find('#button-2b').trigger('click');
    expect(spy).toHaveBeenCalled();
  });

This doesn't work for the first one as the following test fails:

it('button1 triggers counter update function when clicked - spied on the fly', async () => {
    const spy = jest.spyOn(cmp.vm, 'handleClick1');

    await cmp.find('#button-2a').trigger('click');
    expect(spy).toHaveBeenCalled();
  });

This seems to only work when performing the spying before mounting the component like so:

let cmp: any
let spyHandleClick1: any;

 beforeEach(() => {
    spyHandleClick1 = jest.spyOn((ComponentOptionsAPI.methods as any), 'handleClick1');
    cmp = shallowMount(ComponentOptionsAPI, {});
  });

 it('button1 triggers counter update function when clicked - spied before mount', async () => {
    await cmp.find('#button-2a').trigger('click');

    expect(spyHandleClick1).toHaveBeenCalled();
  });

Unfortunately ComponentName.method doesn't seem to be available for components that are written using the composition api, so this workaround doesn't work there. What would be the equivalent to get this working other than always using parentheses for event handlers?

Cheers

[cexbrayat]

Thanks for the use-case 👍

I sadly think we can't do much, as the generated code is fundamentally different between @click="handleClick1" and @click="handleClick2()".
See here

Is it really a problem to have to use parens if you want to spy on the handler?

I'll reopen in the meantime, maybe @lmiller1990 or @afontcu will have an idea on how to handle this.

[maurer2]

Hello, thanks for reopening the issue. I guess it would make sense to always use parentheses when using the composition api and set v-on-style from eslint-plugin-vue (https://eslint.vuejs.org/rules/v-on-style.html) to always when using the composition api to avoid flaky tests.

I got a somewhat related question regarding the lifecycle methods. If I wanted to check if a function is called on mount, I would do it like before with the options api:

let spyRunOnMount: any;

beforeEach(() => {
    spyRunOnMount = jest.spyOn((ComponentOptionsAPI.methods as any), 'runOnMount');
    mount stuff
  });

it('run runOnMount runs on mount', async () => {
    expect(spyRunOnMount).toHaveBeenCalled();
});

With the composition api I would need to return runOnMount function from setup to expose it in the test, but when I register the spy the lifecycle hook has already run and the test fails:

let spyRunOnMount: any;

beforeEach(() => {
    mount stuff
    spyRunOnMount = jest.spyOn(cmp.vm, 'runOnMount');
  });

it('runOnMount runs on mount', async () => {
    expect(spyRunOnMount).toHaveBeenCalled();
  });

Is there some way to test this or is just not possible with components that use the composition api?

Cheers

[cexbrayat]

In that case what I usually really want to check is not that the method itself was called, but rather what it does or that an external dependency was properly called. For example, if I fetch some data on mount, I'll check that the composable that does the HTTP call was properly called:

const mockRaceService = {
  list: jest.fn()
};
jest.mock('@/composables/RaceService', () => ({
  useRaceService: () => mockRaceService
}));

describe('Races.vue', () => {
  test('should display every race', async () => {
    const wrapper = mount(Races);
    await flushPromises();
    expect(mockRaceService.list).toHaveBeenCalled();

I hope this helps. I don't think we'll be able to allow to spy on the method as you would expect, because the model is fundamentally different. Or maybe with some hacky method, but I'm not really sure that's worth the complexity... We've been using the composition API for more than a year, and we manage to test everything in our projects.

[maurer2]

Okay, makes sense. Thanks for the explanation.

Cheers

[cexbrayat]

You're welcome! If you don't mind, I'll close the issue for now, and we can revisit if some other use cases come up.