Repository: storybook
Issue: Addon Test: Viewport not always respected?
Labels: bug,addon: test

We have an issue in the rsc demo.

To reproduce, check out this PR:
https://github.com/storybookjs/storybook-rsc-demo/pull/15

And run:
`pnpm exec vitest run`

You will get the following error:

```
pnpm exec vitest run
(node:4166) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
Re-optimizing dependencies because lockfile has changed

 RUN  v2.0.5 /Users/kasperpeulen/code/github/rsc-demo
      Browser runner started at http://localhost:5173/

4:05:10 PM [vite] ✨ new dependencies optimized: @storybook/experimental-addon-test/internal/test-utils, react/jsx-dev-runtime, next/image, next/dist/compiled/react, sb-original/default-loader, sb-original/image-context
4:05:10 PM [vite] ✨ optimized dependencies changed. reloading
stderr | components/sidebar.stories.tsx > NoteChangedAnimation
Warning: The current testing environment is not configured to support act(...)
 ✓ components/auth-button.stories.tsx (2)
 ✓ components/logout-button.stories.tsx (1)
 ✓ components/note-editor.stories.tsx (2)
 ✓ components/note-list-skeleton.stories.tsx (1)
 ✓ components/note-list.stories.tsx (2)
 ✓ components/note-preview.stories.tsx (1)
 ✓ components/note-ui.stories.tsx (3)
 ✓ components/search.stories.tsx (3)
 ❯ components/sidebar.stories.tsx (5) 15035ms
   ✓ Default
   ✓ Empty
   ✓ NotesExpanded
   × NoteChangedAnimation 15002ms
   × ToggleSidebarOnMobile
 ✓ app/note/edit/page.stories.tsx (3) 731ms
 ✓ app/note/[id]/page.stories.tsx (7) 748ms
 ✓ app/note/edit/[id]/page.stories.tsx (4) 1076ms

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 2 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  components/sidebar.stories.tsx > NoteChangedAnimation
Error: 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".
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/2]⎯

 FAIL  components/sidebar.stories.tsx > ToggleSidebarOnMobile
TestingLibraryElementError: Unable to find an accessible element with the role "menubar"

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

Ignored nodes: comments, script, style
<div />
 ❯ play components/sidebar.stories.tsx:69:31
     67|   },
     68|   play: async ({ canvas, step, userEvent }) => {
     69|     const searchInput = canvas.getByRole('menubar')
       |                               ^
     70|
     71|     await step('Sidebar is initially visible', async () => {
 ❯ ../../../../../node_modules/.vite/deps/@storybook_experimental-addon-test_internal_test-utils.js:51:98

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/2]⎯

 Test Files  1 failed | 11 passed (12)
      Tests  2 failed | 32 passed (34)
   Start at  16:05:06
   Duration  21.76s (transform 13ms, setup 6.60s, collect 1.71s, tests 18.35s, environment 0ms, prepare 2.52s)
```

It is hard to debug, because the errors goes away when running with headless: false.

My suspicion is that it is related to viewports. Because the element that is not found, is only visible in the mobile viewport.