Vitest browser request: Add mousedown, mousemove and mouseup events

[os-tohe]

I would like to request similar events that the Storybook tests provide. In Storybook tests you can import fireEvent, which contains mouseDown, mouseMove and mouseUp functions. Here is the documentation about using the fireEvent. It seems to be using the Testing library under the hood: How does component testing in Storybook work?.

My use case for this is simple. I want to be able to test that our resize handle functions correctly. I need to call the mouse down event on the handle, then move the mouse position for example 100 pixels up and then call the mouse up event.

This is how it works in Storybook tests:

const resizeIcon = canvas.getByTestId('resize-icon-handle');

await fireEvent.mouseDown(resizeIcon);
await fireEvent.mouseMove(resizeIcon, { clientY: -100 });
await fireEvent.mouseUp(resizeIcon);

I have not figured out a way how to test this with the current Vitest browser version (2.1.3). I also asked this on your Discord channel, but there seems to be no way of running these kinds of tests for now.

[Smrtnyk]

I am also interested in this

[hi-ogawa]

Reading this https://testing-library.com/docs/guide-events/#interactions-vs-events, It doesn't look like fireEvent API makes sense for Vitest browser mode since the benefit of Vitest browser mode is to genuinely simulate user interaction with playwright/webdriverio API.

Nonetheless, if you want fireEvent API, I think it's possible to install @testing-library/dom and use fireEvent directly just for limited cases of testing where it's needed.

[os-tohe]

Using the fireEvent from @testing-library/dom worked wonderfully, thanks!

[sheremet-va]

We plan to implement the pointer API from https://testing-library.com/docs/user-event/pointer/ You can keep track of the progress at #5770

We do not plan to implement low-level mouse APIs because it contradicts our goal. Tests should test interactions, not isolated events. You can read more at https://testing-library.com/docs/user-event/intro#differences-from-fireevent

Note that you can still access your provider's API with commands.