How to test a component in Vue 3 / VTU 2 that uses the equivalent of Vue 2's $listeners

[chrismooreajbell]

The $listeners api is no longer supported in Vue 3. We use it a lot in Vue 2 and migrating it is causing us some problems.

According to this thread and example, the way to hack around this functionality is to use a prop with the same name as the event being emitted, prefixed with on: vuejs/core#5319 (comment)

So far so ... m'kaaaaay....

My question is, how should I test this functionality? I cloned that example and created 2 tests to test the functionality.

The repo is: https://github.com/chrismooreajbell/vtu-listeners/
The relevant test file is: https://github.com/chrismooreajbell/vtu-listeners/blob/main/src/Badge.spec.ts

This app code works in the browser, as you can test by running npm run dev in the repo.

To my mind, the way to test the rendering of the conditional content would be to set the relevant listener in the $attrs during mount. However this doesn't work; the onDelete prop is undefined. This is shown in the first test.

The way that does work is to assign the prop, but this doesn't reflect real-world usage. This is shown in the second test.

Any ideas please?