Differences between userEvent.setup() and UserEvent imported directly.

[jgodi]

We are migrating from v13->v14 and going through setting up the user object via the user.setup() method. There are some differences between doing this and using the backwards-compatible importing UserEvent directly.

I have a test case here: https://stackblitz.com/edit/vitest-dev-vitest-ypkzea?file=test%2Fcomponent.test.tsx

I would think that each test would behave the same way, but it looks like the click from the direct import also hover but the click from the userEvent.setup does not.

Any pointers here?

[ph-fritsche]

If you call userEvent.click(), it internally calls userEvent.setup() – each time. Therefore you create three separate instances, each tracking the pointer position and entering the element (twice for .click(), once for .hover()).

If you call userEvent.setup() yourself, you get one instance. The first .click() moves the pointer over the element. Since it never leaves, the subsequent .click() and .hover() don't trigger enter events.