Description
Subject of the issue
Hello there,
We're currently migrating from Vue 2 to Vue 3 using the @vue-compat build. We've encountered an issue where some of our tests fail specifically around event emitting when nested components are involved.
When a component has a @click.native binding, the click event is never received when we call trigger('click') on that element in our tests.
We're aware that .native no longer exists in Vue 3, but we expected @vue-compat to preserve this behaviour temporarily, allowing us to refactor it post-migration. However, even after replacing @click.native with @click="someMethod", the event still does not trigger in the test.
I found this post which seems to fix the unit test for us when the INSTANCE_LISTENERS flag is set to false however we don't see the need to do this within the application it seems it to work as expected, it's our actual tests that are now failing despite the application still working. You'll be able to see this on our reproduction.
Steps to reproduce
A colleague & I have thrown together a quick Stackblitz for easy viewing: https://stackblitz.com/edit/github-6ktzke9g-arazystw?file=src%2Fcomponents%2FButton.vue
By running npm run dev in the terminal and clicking the button, you'll see the event emits just fine and the count is incremented by 1 each time on the DOM. Now run npm run test and see that it fails, unable to detect the event emission despite the application just showing that it's evidently working.
Moreover, the configureCompat option within Button.vue on the above Stackblitz has INSTANCE_LISTENERS flag set to false. Turn this flag back on by changing it to true or simply remove the key for it to fall back to it's default value of true and notice the test now fails, but the application continues to work.
Expected behaviour
Prior to the upgrade, we'd expect this to still work as it did i.e be able to see event properties within wrapper.emitted(). Ideally we do not want to be turning off flags from Vue 3 for the sake of getting tests to pass when they work just fine on the main application.
Actual behaviour
We should be seeing the number increment as a response to the click event, which we do not within the test.
Possible Solution
As mentioned, possible solutions found so far is to disable INSTANCE_LISTENERS flag via the compat config which we're unsure exactly on what knock on effects this might have, given the application works fine without it, or alternatively, just today it seems we can also get this to work by removing the .trigger('click') and replacing it with: wrapper.findComponent(Button).vm.$emit('click') which forces the click event to be emitted from the component.
The issue almost seems like click triggers are not responding as expected within nested components.