Vitest Browser Modes input fill, type timeout

[akoskm]

Hi!

I'm trying to achieve something similar I would do with testing-library/react, but using the Browser Mode API:

1. locate and input
2. type some text into it
3. check that the text is rendered on the screen somewhere else

test('types into the search', async () => {
  const { getByRole, getByText } = render(<Search />)
  const input = getByRole('input', { name: 'search' })
  await userEvent.fill(input, 'Browser Mode')
  await expect.element(getByText('Searching for Browser Mode')).toBeInTheDocument()
})

I have tried userEvent.fill, type, but also using the page API:

test('types into the search', async () => {
  render(<Search />)
  const input = await page.getByRole('input', { name: 'search' })
  await input.fill('Browser Mode');
  await expect.element(page.getByText('Searching for Browser Mode')).toBeInTheDocument()
})

However, both of these time out:

 RERUN  app/components/Search.test.tsx x6 

 ❯  0 (chromium)  app/components/Search.test.tsx (2 tests | 1 failed) 15004ms
   ✓ renders search
   × types into the search 15002ms
     → Test timed out in 15000ms.
If this is a long-running test, pass a timeout value as the last argument or configure it globally with "testTimeout".

I'm sure I'm missing something simple here I just can't spot what.

Here's the repo: https://github.com/akoskm/vitest-browser-mode

Any help is appreciated. Thanks!

[hi-ogawa]

Confusingly, aria role is textbox instead of input

- getByRole('input', { name: 'search' })
+ getByRole('textbox', { name: 'search' })

Also if you see this log, you should add optimizeDeps.include: ['react/jsx-dev-runtime']

3:19:06 PM [vite] ✨ new dependencies optimized: react/jsx-dev-runtime
3:19:06 PM [vite] ✨ optimized dependencies changed. reloading

[vitest] Vite unexpectedly reloaded a test. This may cause tests to fail, lead to flaky behaviour or duplicated test runs.
For a stable experience, please add mentioned dependencies to your config's `optimizeDeps.include` field manually.

Also I just noticed vitest is not in package.json. It works on npm, but it should be explicitly added as dependency.

[hi-ogawa]

Ideally such typo should show up as "locator not found" error instead of confusing timeout, but this is due to #7309.