[Bug]: composeStories from @storybook/react does not work with interactions that use the step function

[fabianherrera15]

Describe the bug

According to the docs: "the play function does not run automatically for you, but rather comes in the returned component, and you can execute it as you please." This is true but the play function can't be run on stories that grouped interactions using the step function. I haven't found a way to pass the expected step function to the play function of a Story that is used in a test file.
In a story file:

export const InputFieldFilled: Story<InputFieldProps> = {
  play: async ({ canvasElement, step }) => {
    const canvas = within(canvasElement);
    const input = canvas.getByRole('textbox') as HTMLInputElement;
    await step('Type message', async () => {
         await userEvent.type(canvas.getByRole('textbox'), 'Hello world!');
         expect(input.value).toEqual('Hello world!');
    })
    ...
  },
};

In a test file:

const { InputFieldFilled } = composeStories(stories);

test('renders with play function', async () => {
  const { container } = render(<InputFieldFilled />);

  // pass container as canvasElement and play an interaction that fills the input
  await InputFieldFilled.play({ canvasElement: container }); // How to pass 'step'?
  ...
});

The test fails with the following error:
[TypeError: step is not a function]

To Reproduce

No response

System

No response

Additional context

No response

[shilman]

cc @yannbf

[Foxhoundn]

This is probably related to Re-Usability in #21573

[yannbf]

Hey there @fabianherrera15 ! Did you try this with Storybook 7? This shouldn't be a problem. The step function is defined internally when Storybook prepares the story, so you shouldn't have to pass it. I tested this is two different projects and had no issues with it.

[fabianherrera15]

Hi @yannbf. Thank you for following up on this issue. I just tried with storybook/react 7.0.5 but unfortunately, I'm still getting the [TypeError: runStep is not a function] error.

[yannbf]

No worries! I was setting up a minimal repro and I found the cause for the bug. It only happens if you don't use setProjectAnnotations so I'll make a PR to fix that soon!

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.1.0-alpha.14 containing PR #22308 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb@next upgrade --tag future

[shilman]

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.10 containing PR #22308 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb@latest upgrade

[fabianherrera15]

I confirm the new version fixes the issue. Thank you all! 🎆

[yannbf]

I confirm the new version fixes the issue. Thank you all! 🎆

Thank you so much for reporting, if it wasn't for you this problem would still be there!