how to test method in vue file

[xxholly32]

foo.vue

<script setup>
const handleClick = () => {
  console.log(`click`)
}
</script>

<template>
  <button @click="handleClick">click me</button>
</template>

test.jsx

import { describe, expect, vi } from 'vitest'
import foo from 'foo.vue'
describe('foo', () => {
  it('click', async () => {
    const wrapper = mount(foo)

    await wrapper.find('button').trigger('click')
    await nextTick()

    expect(wrapper.vm.handleClick).toHaveBeenCalled() // to false  ,but i want true
  })

[cexbrayat]

Hi @xxholly32

You have to spy on the function before clicking on the button with vi.spyOn(wrapper.vm, 'handleClick')
Also you probably need to have parenthesis on your function call in your template @click="handleClick()"

If that does not work, can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

It only takes a few minutes, and we'll be able to take a look

[xxholly32]

ty for your time

I don't think this is a problem with @vue/test-utils, but maybe something I wrote when defining events

correct

@click="handleClick()" // or  @click="val => handleClick(val)"

not work

@click="handleClick"

my demo: https://stackblitz.com/edit/github-4zhpey?file=src%2Fcomponents%2FHelloWorld.vue,src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts,package.json

[cexbrayat]

Yes, this is expected, because this is how spying works in JS

See #1769 (comment) for a detailed explanation