[Bug]: Importing interaction stories in a test case and running them using .play throws act warnings

[ankitprahladsoni]

Describe the bug

Using @testing-library/user-event v14.5 and RTL dom v9.3.3

While running the test src/stories/ActWarning.test.jsx, the test cases passes but the first test case silently throws act warnings

    console.error
      Warning: An update to ActWarning inside a test was not wrapped in act(...).

      When testing, code that causes React state updates should be wrapped into act(...):

      act(() => {
        /* fire events that update state */
      });
      /* assert on the output */

      This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
          at ActWarning (/Users/username/sbdemo/cra/default-js/src/stories/ActWarning.jsx:4:52)

       6 |   return (
       7 |     <>
    >  8 |       <button onClick={() => shouldShowMessage(true)}>Show message</button>
         |                              ^
       9 |       {showMessage && "Demo message"}
      10 |     </>
      11 |   );

To Reproduce

clone https://github.com/ankitprahladsoni/storybook-act-warnings
run yarn test
Observer the console for act warning

System

No response

Additional context

Only the first test throws the act warning in the file src/stories/ActWarning.test.jsx, the rest of the two tests that aren't using the .play api run normally without throwing any warning.

[shilman]

@yannbf @kasperpeulen is this something you can help with?

[kasperpeulen]

@ndelangen @ghengeveld I thought we seen this before, and there was some resolution by changing the NODE_ENV?

[yannbf]

@ndelangen @ghengeveld I thought we seen this before, and there was some resolution by changing the NODE_ENV?

Wasn't that for the play function while it was running in Storybook? OP mentions it fails when using the play fn in portable stories

[yannbf]

@kasperpeulen I did some investigation and it seems like the act warning happens when using userEvent in @storybook/test, however when using userEvent from @storybook/testing-library, the act warning does not happen. If all we do is reexport userEvent internally, I wonder why the warning happens only with the @storybook/test package.

Here's the minimal repro using the OP's provided repro:

/* eslint-disable testing-library/prefer-screen-queries */
import React from 'react'
import { screen as canvas, render } from '@testing-library/react'
import * as stories from './ActWarning.stories'
import { composeStories } from '@storybook/react'

import { userEvent } from '@storybook/test'
// import { userEvent } from '@testing-library/user-event'

const { Basic } = composeStories(stories)

describe('ActWarning from storybook', () => {
  it('throws act warnings when ran', async () => {
    render(<Basic />)

    await userEvent.click(canvas.getByRole('button'))
  })
})

I think we need to investigate this further

[zargold]

however when using userEvent from @storybook/testing-library,

I think this was supposed to say: @testing-library/user-event (at least that's what was used in the video.

[sjwilczynski]

@yannbf, @kasperpeulen any chance of getting this fixed?

[xveganxxxedgex]

Has anyone found a workaround to this issue? My tests do seem to pass, just with the big warnings. I tried wrapping the await StoryComponent.play() in the act wrapper to see if that appeased the warning, but that surprisingly caused all the tests to fail.

[sjwilczynski]

@xveganxxxedgex we had problems with failures after wrapping play function in act and mitigated it by creating a utility function like:

import type { ReactRenderer } from "@storybook/react";
import type {
  ComposedStoryPlayContext,
  ComposedStoryFn,
} from "@storybook/types";
import { act, waitFor } from "@testing-library/react";

type PlayFunctionThatReturnsPromise = (
  options: ComposedStoryPlayContext<ReactRenderer>,
) => Promise<void>;

export const executePlayFunction = async (
  Story: ComposedStoryFn<ReactRenderer>,
  options: ComposedStoryPlayContext<ReactRenderer>,
) => {
  let playFunctionCompleted = false;
  const playFunction = Story.play as PlayFunctionThatReturnsPromise;
  act(() => {
    playFunction(options)
      .then(() => {
        playFunctionCompleted = true;
      })
      .catch((error) => {
        throw error;
      });
  });
  await waitFor(() => {
    expect(playFunctionCompleted).toBe(true);
  });
};

you can check it on some examples in microsoft/nova-facade#101

[ankitprahladsoni]

I'm still getting the same error on "storybook": "^8.3.4".