Using @testing-library/react and @testing-library/user-event with vitest's browser mode?

[gaspardip]

Hey,

I'm currently trying to enable browser mode for a codebase i'm working on since simulated envs (currently on jsdom) have a lot of shortcomings when it comes to styling and events.

Now I have a huge set of test suites, speaking like 14k. Trying browser mode out I noticed that using screen and userEvent from @testing-library/react and @testing-library/user-event won't work oob, e.g. the following test

  it('should be able to display tooltip', async () => {
    setup({ tooltip: 'Tooltip', tooltipPosition: 'top' });

    await userEvent.hover(screen.getByRole('button'));

    await screen.findByText('Tooltip');
  });

fails when importing userEvent from @testing-library/user-event but passes when importing it from @vitest/browser/context. I'd like to know why exactly, what's going on under the hood?

Now my question is, is it possible to keep using screen and userEvent from @testing-library or is the idea/is it mandatory to move towards page and userEvent from @vitest/browser/context?

Another question I have is how would I test the following scenario using browser mode?:

  it('should support disabled', async () => {
    setup({ disabled: true });

    await userEvent.click(screen.getByRole('button'));

    expect(onClick).not.to.have.been.called;
  });

This works using jsdom but fails miserably on browser mode because of playwright's actionability checks (the element is never actually clicked because it cannot be clicked as far as I can tell, which makes sense)

The setup is a bit complex to replicate tbh, the codebase is just huge, but I was wondering if anyone could provide some guidance here.

[sheremet-va]

screen.getByRole returns a Locator, not the HTML Element. You can call .element() or .query() to return the HTML element itself to pass it down to @testing-library/user-event:

await userEvent.hover(screen.getByRole('button').element());

This works using jsdom but fails miserably on browser mode because of playwright's actionability checks (the element is never actually clicked because it cannot be clicked as far as I can tell, which makes sense)

You can disable actionability checks by providing force: true as an option to .click:

await userEvent.click(screen.getByRole('button'), { force: true });