Vitest Browser Mode - Flaky tests in suite

[JoaoCnh]

Hey everyone

I'm trying out Vitest browser mode w/ Playwright as the provider and I'm running into some weird behaviour (caused or not by my ignorance).

I'm testing a video player and I created a suite of tests w/ describe.

describe('my video player', () => {
   // my tests created with it()
});

I then created a few tests but they were very flaky. Sometimes an element would no be located, sometimes it would.
Could only resolve through retries. Using render from vitest-browser-react'.
So something like this, for example:

it('should hide loader once video loads', () => {
  const screen = render(<Video />);
  const loader = screen.getByRole('alert');
  
  await expect.element(loader).toBeInTheDocument();
  await expect.element(loader).not.toBeInTheDocument();
});

it('should play video if I click on the play button', () => {
  const screen = render(<Video />);
  
  const video = screen.getByTestId('video');

  await expect.element(video).toHaveClass('vjs-paused');
  await screen.getByRole('button', { name: 'Play' }).click();
  await expect.element(video).toHaveClass('playing');
});

These would start flaking constantly. I couldn't really understand why.

The window the pops up from playwright is not really helpful because it only shows me the result of the last test that was run. I can't navigate to each test individually or re-run only one.

I then tried to put all of these assertions and interactions under 1 test and the flakiness disappeared.

Am I doing something wrong? Are we supposed to write browser tests differently?
This seems like a simple thing but I can't get my head around what I was doing wrong.

[sheremet-va]

Interesting! Yeah, it should work normally. What errors do you get? Is the second test flaky? What is loader in the first test?

By the way, adding vi.waitFor doesn't do anything because expect.element already calls it

[JoaoCnh]

thank you for the reply. I will update the loader on the example. It's just the locator for it.

the flakiness is kind of random? I don't see a rhyme or reason for it.

BUT I have been testing a lot of different things. I visited the official GitHub for vitest-browser-react and I changed the render to use page.render from import { page } from '@vitest/browser/context';

and for now the flakiness seems gone?

I still need to put it through the ringer to confirm but I will update.

[sheremet-va]

page.render and render are the same functions, we just also put it on a page for convenience 🤔

[JoaoCnh]

I cannot explain why but I'm not seeing flakiness anymore weirdly. I end up getting an uncaught error:

AbortError: The operation was aborted.

but this might be something else I'm doing wrong. Every test case seems to be passing

[JoaoCnh]

I suspect this bit from the README was the key for the flakiness because I did not have this before:

// ./setup-file.ts
// add an import at the top of your setup file so TypeScript can pick up types
import 'vitest-browser-react'

[JoaoCnh]

another funny thing. Some tests start failing if I go to the window that pops up and open the browser devtools. Some tests straight up start failing always. If I close, and restart the tests they all pass again.