Spying on a method does not work

[jf-niji]

Subject of the issue

When I trigger a click event on a component when spying a function, the function is called, but the spy does not work

Steps to reproduce

Here is my component:

<template>
	<button class="close-btn no-select" @click="close" @keydown.esc="close" />
</template>

<script>
	export default {
		name: 'CoreCloseButton',

		methods: {
			close() {
				this.$emit('close')
			},
		},
	}
</script>

Here is my test:

import { shallowMount } from "@vue/test-utils"

import CoreCloseButton from "./CoreCloseButton"

describe("CoreCloseButton.vue", () => {
	it('Should call close method when click on button', async () => {
		const wrapper = shallowMount(CoreCloseButton)

                let spyClose = jest.spyOn(wrapper.vm, 'close')

                await wrapper.trigger('click')

                expect(spyClose).toBeCalled()
	})
})

Expected behaviour

The spy should be called

Actual behaviour

The spy is not called

[afontcu]

Hi! You might want to spy on the component definition, not on the vm instance:

  it('Should call close method when click on button', async () => {
    const spyClose = jest.spyOn(CoreCloseButton.methods, 'close') // Notice how this line changed

    const wrapper = shallowMount(CoreCloseButton)

    await wrapper.trigger('click')

    expect(spyClose).toBeCalled()
  })

Moreover, I'd suggest not testing the internals of the component (in this case, if a specific method is called), but rather the "effects" of calling that method – the emitted event:

  it('Should call close method when click on button', async () => {
    const wrapper = shallowMount(CoreCloseButton)

    await wrapper.trigger('click')

    expect(wrapper.emitted('close')).toHaveLength(1)
  })

hope it helps!

[jf-niji]

I changed the test with your second suggestion.

With the first one, the test is unfortunately still unsuccessful...

[afontcu]

Just tested it out locally and it is passing – can you share a snippet?

[jf-niji]

Oh, I did not notice that you are spying before mounting the component. It works now.

Can you explain why it is necessary to spy before mounting the component?

[jf-niji]

Here is the same test, but with 'keydown' event. And it works... :

it('Should call close method when escape key is down', async () => {
	const wrapper = shallowMount(CoreCloseButton)

	let spyClose = jest.spyOn(wrapper.vm, 'close')

	await wrapper.trigger('keydown.esc')

	expect(spyClose).toBeCalled()
})

[lmiller1990]

I am also somewhat unsure why you need to spy on the method before mounting the component. 🤔

Anyway. looks like we have a solution 👍

[jf-niji]

I don't want to spy before mounting. I want to spy a method that is called by triggering a 'click' event. Please look at my test. I spy after calling shallowMount().

Yes we have a solution. But it's still weird that by triggering keydown, it works, and not with the click...

[lmiller1990]

Didn't you say this was working?

it('Should call close method when escape key is down', async () => {
	const wrapper = shallowMount(CoreCloseButton)

	let spyClose = jest.spyOn(wrapper.vm, 'close')

	await wrapper.trigger('keydown.esc')

	expect(spyClose).toBeCalled()
})

Did I misunderstand?

I would definitely recommend the above solution, testing the "effect" rather than trying to use spies, though.

[okakyo]

You may solve this problem if you spy on a method like this :

  it('Should call close method when click on button', async () => {
    const spyClose = jest.spyOn(CoreCloseButton.options.methods, 'close') // Notice how this line changed
    const wrapper = shallowMount(CoreCloseButton)
    await wrapper.trigger('click')
    expect(spyClose).toBeCalled()
  })

[KillianLeroux]

Your solution works for me @okakyo thank you!

[lmiller1990]

Cool, FYI this won't work in VTU v2 and Vue 3 yet, but soon, follow this PR for progress vuejs/core#4216

[andercard]

This option worked for me issues#775 and I don't have to declare before the shallowMount

[beepART]

I had the same issue, where I tried to use .toHaveBeenCalled(), which returned in 0 calls for me. I found out, that when I call the method with parenthesis in the component itself, my spy actually works.

from @click="addEntry" to @click="addEntry()"

[paddotk]

Strange thing, but what @beepART said works for me too. Thanks!

[Nirav-Gaglani]

@beepART Thank you for informing, I was facing the same issue. Worked for me.

[gileto]

I had the same issue, where I tried to use .toHaveBeenCalled(), which returned in 0 calls for me. I found out, that when I call the method with parenthesis in the component itself, my spy actually works.

from @click="addEntry" to @click="addEntry()"

GOD BLESS YOU