feat: support CSF3 format

[yannbf]

Issue: #31

Add support for CSF3

Release Notes

Features

Storybook released CSF3, where the story can also be an object. This is now supported in @storybook/testing-react. CSF3 also brings a new function called play, where you can write automated interactions to the story.

In @storybook/testing-react, the play does not run automatically for you, but rather comes in the returned component, and you can execute it as you please.

Consider the following example:

export const InputFieldFilled: Story<InputFieldProps> = {
  play: async () => {
    await userEvent.type(screen.getByRole('textbox'), 'Hello world!');
  },
};

You can use the play function like this:

const { InputFieldFilled } = composeStories(stories);

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

  // play an interaction that fills the input
  await InputFieldFilled.play!();

  const input = screen.getByRole('textbox') as HTMLInputElement;
  expect(input.value).toEqual('Hello world!');
});

📦 Published PR as canary version: 0.0.19--canary.37.ed1f139.0

✨ Test out this PR locally via:

npm install @storybook/testing-react@0.0.19--canary.37.ed1f139.0
# or 
yarn add @storybook/testing-react@0.0.19--canary.37.ed1f139.0

[loeck]

Thanks a lot for this PR, look good on my project with 0.0.19--canary.37.24ee251.0 now 🙏 (only few simple tests, so maybe I don't handle lot of cases)

[yannbf]

Thanks a lot for this PR, look good on my project with 0.0.19--canary.37.24ee251.0 now 🙏 (only few simple tests, so maybe I don't handle lot of cases)

Thank you for trying it out! I'll be updating this PR soon to support CSF3 types, I'll keep you posted!

[benbender]

Same for me - works like a charm (besides the type-problem). Thank you for your work! 🥇

[yannbf]

@loeck @benbender thank you so much!! both for using the lib and for helping out testing. Support like yours is what gives me energy to keep improving the library ❤️

0.0.21 has been released and it includes proper typings. Should work well, but please let me know if you encounter any issues :)