Is this a bug in "@vue/test-utils" ? Or is it a bug in "Vitest" ?

[jason-chang]

Hi all, I'm trying to test a Vue component with a DOM structure like this , and I'm trying to trigger a click event on the label element, but the input doesn't trigger a change event.

Demo is Here.

https://stackblitz.com/edit/vitest-dev-vitest-xyzzwj

All tests should have passed, but an error occurred.

Is this a bug in "@vue/test-utils" ? Or is it a bug in "Vitest" ?

[jason-chang]

The problem has been solved.

The reason is that the event loop is not activated until the element is inserted into the DOM tree.
This is ported between JsDom and the browser implementation.

So when we are unit testing, if we build and want the event loop to work properly, please insert the element into the DOM tree before running the test code.
If you're trying @vue/test-utils + vitest for unit testing like me, remember to insert the components into the dom tree like this.

mount(
    <SomeComponent>, 
    { attachTo: 'body' }  // important
)