Interactions: assertions fail on first load

[bodograumann]

Describe the bug
The expect assertion in a play function can fail, when it is run too early (I think).
In particular, when the storybook is just loaded.

To Reproduce
Go to https://next--storybookjs.netlify.app/official-storybook/?path=/story/addons-interactions-accountform--find-by

You will find, that the story fails. Due to being

Unable to find role="button"

If you rerun the play function, or already had the storybook loaded and just navigate to this specific story, everything is green however.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Sorry I missed this the first time around. Is it still a problem? Story looks like it's loading fine to me now.

[bodograumann]

Yes, unfortunately it still fails on Firefox 95.0.2, Chromium 97.0.4692.71 and QtWebEngine 5.15.8 based on Chromium 87.

The console does not show much:

In firefox it shows a lengthy manager log, probably because I have the react devtools installed. No errors though.

This is on Arch Linux with linux kernel 5.15.13-arch1-1

[shilman]

Thanks, got it to repro in Firefox 🙏

[lonyele]

I looked at it and observed that if the code is using some waitFor, findBy* to wait for something, it can fail the test. Not only this FindBy but all other stories that use it.

some observations

• bigger the difference between story's setTimeout's time and waitFor, findBy*'s time, the more possibility to pass the test. For this issue's FindBy case, if the code is setTimeout(() => setIsLoading(false), 10); it passes most of the time. if it is something like 500ms or 800ms that is near to findBy*'s default timeout 1000ms, then it fails most of the time.

I feel like this issue can be revisited later after #16492 is fixed. I suspect the current behavior that WAI examples(passing the test) all fails at first load -> flickers -> pass the test. Just my guess

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.3 containing PR #18460 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.