Interactions: assertion in waitFor causes UI to flicker

[ghengeveld]

Describe the bug

Given this play function:

await userEvent.click(await within(canvasElement).findByText('Click'));
await waitFor(async () => {
    await expect(args.onSubmit).toHaveBeenCalledWith(expect.stringMatching(/([A-Z])\w+/gi));
});

The expect might fail initially, and then succeed on the 2nd try of waitFor. This causes the status badge in the UI to go red for a brief moment before turning green, and the log will show the error for a moment.

We should show the "pending" state when an assertion fails inside a waitFor, until it times out.

To Reproduce

See Interactions on https://5a375b97f4b14f0020b0cda3-buizxbusoa.chromatic.com/?path=/story/addons-interactions-accountform--wait-for

┆Issue is synchronized with this Asana task by Unito

[shilman]

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.6 containing PR #18518 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.