Intermittent Interaction Test Failure due to Timing issue or improper initialization of React or Storybook

[yynnooot]

Summary

I keep getting "TypeError: Cannot read propertoes of null ('reading useState') on the initial run of interaction tests. However, on subsequent runs the test pass. There is something going on where either React or Storybook is not ready on the first run.

The useState error suggests that React is not fully initialized when the component is rendered and/or there could be a race condition between Storybook's initialization and the test execution.

Please help, I have been trying to solve this for days now!

Additional information

I am using:

• Storybook 9.0.8,
• Vite 6.3.5,
• React 19.1.0,
• Vitest 3.2.3,
• and using the @storybook/addon-vitest add on,
• working in an npm workspace monorepo

Create a reproduction

No response

[vanessayuenn]

@yynnooot Hi, thanks for reporting this. If you can supply a reproduction, I can change this into a bug report and prioritize it.

[CHE1RON]

Have you tried using waitFor with a timeout?

import { expect, fn, userEvent, waitFor } from 'storybook/test';

WaitingForDataFetch.test('has items', async ({ canvas }) => {
  // Wait for component to be populated
  await waitFor(
    async () => {
      const items = canvas.getAllByRole('treeitem');
      await expect(items).toHaveLength(6);
    },
    { timeout: 2000 },
  );
});

Note that I'm using the new syntax here, but the waitFor block works the same inside a play function 😉