Testing handlers should not require that you add parentheses

[lobo-tuerto]

Subject of the issue

Right now if you have a child component that handles an emitted event by calling a function in the parent component, it will just fail if you don't add parenthesis to the event handler name.

Steps to reproduce

This works:

<MainTopbar @account="handleTopbarAccountClick()" />

This does not work:

<MainTopbar @account="handleTopbarAccountClick" />

Expected behaviour

This should work:

<MainTopbar @account="handleTopbarAccountClick" />

Actual behaviour

This just fails and I think there isn't enough information as to why if the Vue documentation exemplifies event handling usually without parentheses.

<MainTopbar @account="handleTopbarAccountClick" />

Possible Solution

For now, use parenthesis on all event handlers.
Talk to the Vue team about it, make them change their ways/docs :P
Add this information in a very visible place on the Vue Test Utils docs.

Previous discussions

vuejs/vue-test-utils#1901
vuejs/vue-test-utils#929
https://stackoverflow.com/questions/62696939/test-on-function-call-in-vue-template-only-passes-if-the-function-is-called-with/62703070#62703070

[lmiller1990]

I agree this is confusing. I wonder why this isn't working?

Definitely a bug, I'd say. We should fix this. Is that something you'd like to try and do?

[ebisbe]

@lmiller1990 I'm picking this one as my first one. Is that an easy one? Can you guide me towards which files I should be looking. I've been trying to figure out but I have no clue.

[lmiller1990]

Hard to say if any of the open issues are easy/hard without trying to fix them, heh. Learning to work on a new code base is never easy - good place to start, though, this would be a great one to fix.

I'd recommend trying a few templates - webpack, Jest, Vitest. Is this runner/bundler specific? Let's try to figure out if there's actually a bug here, or potentially in another part of the tool chain.

Also try native events vs custom events - is it specific to one of those?

Another debugging tip - try reproduce without a runner:

// repro.js
require('jsdom-global')()
const { mount } = require('@vue/test-utils')
// if you need Vue
const vue = require('vue/dist/vue.common.js')

const C = {
  template: `<button @click="fire" />`,
  methods: {
    fire() { console.log('should log') }
  }
}

mount(C).find('button').trigger('click')
// should log

Run with node repro.js - no runner needed, this is more minimal and might help isolate the problem. If it still does not work as expected in this minimal form, we can deduce it's a bug in Test Utils, and poke around inside of the trigger function (where-ever that's defined, should be able to just search for it in packages/test-utils).

[ebisbe]

You minimal repro is working so it's not an issue from this repo. I'll try to see what's going on with webpack, Jest, Vitest. I'm almost 100% sure that jest fails as the project I'm working we are using 2.7 with Jest and I remember facing the same issue.

[lmiller1990]

Seems like a problem in vue-jest, then. I guess we should look at how that works and see if we can figure it out.

So - if this isn't a bug here, we can move the issue to vue-jest. I'll do that now,.

[lobo-tuerto]

Thanks for looking into this guys 🙏

BTW the environment I observed this behaviour in was Vue 3 + Vite + Vitest.

Here are some previous discussions in other repositories that might shed some light into why this is happening:

Vitest: vitest-dev/vitest#2066
Test Utils: vuejs/test-utils#1769