Merge pull request #46 from storybookjs/feature/support-csf3

feat: support CSF3 format

Author: yannbf

README.md

@@ -156,6 +156,59 @@ Primary.args.children;
 Primary.args!.children;
 ```
 
+### CSF3
+
+Storybook released a [new version of CSF](https://storybook.js.org/blog/component-story-format-3-0/), where the story can also be an object. This is supported in @storybook/testing-react, but you have to match the requisites:
+
+1 - Either your **story** has a `render` method or your **meta** contains a `component` property:
+
+```js
+// Example 1: Meta with component property
+export default {
+  title: 'Button',
+  component: Button // <-- This is strictly necessary
+}
+
+// Example 2: Story with render method:
+export const Primary = {
+  render: (args) => <Button {...args}>
+}
+```
+
+2 - For typescript users, you need to be using Storybook 6.4 or higher.
+
+#### CSF3 - Interactions with play function
+
+CSF3 also brings a new function called `play`, where you can write automated interactions to the story.
+
+In @storybook/testing-react, the `play` function 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:
+
+```tsx
+export const InputFieldFilled: Story<InputFieldProps> = {
+  play: async () => {
+    await userEvent.type(screen.getByRole('textbox'), 'Hello world!');
+  },
+};
+```
+
+You can use the play function like this:
+
+```tsx
+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!');
+});
+```
+
 ## Typescript
 
 `@storybook/testing-react` is typescript ready and provides autocompletion to easily detect all stories of your component:

example/package.json

@@ -35,10 +35,10 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.3.0",
-    "@storybook/react": "^6.3.0",
-    "@storybook/components": "^6.3.0",
-    "@storybook/theming": "^6.3.0",
+    "@storybook/addon-essentials": "^6.4.0-alpha.30",
+    "@storybook/react": "^6.4.0-alpha.30",
+    "@storybook/components": "^6.4.0-alpha.30",
+    "@storybook/theming": "^6.4.0-alpha.30",
     "@storybook/preset-create-react-app": "^3.1.5",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^13.1.9"

example/src/components/Button.stories.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Button, ButtonProps } from './Button';
 
@@ -51,9 +53,32 @@ export const StoryWithParamsAndDecorator: Story<ButtonProps> = (args) => {
   return <Button {...args} />;
 };
 StoryWithParamsAndDecorator.args = {
-  children: 'foo'
-}
+  children: 'foo',
+};
 StoryWithParamsAndDecorator.parameters = {
-  layout: 'centered'
-}
-StoryWithParamsAndDecorator.decorators = [(StoryFn) => <StoryFn />]
+  layout: 'centered',
+};
+StoryWithParamsAndDecorator.decorators = [(StoryFn) => <StoryFn />];
+
+export const CSF3Button: Story<ButtonProps> = {
+  args: { children: 'foo' },
+};
+
+export const CSF3ButtonWithRender: Story<ButtonProps> = {
+  ...CSF3Button,
+  render: (args: ButtonProps) => (
+    <div>
+      <p data-testid="custom-render">I am a custom render function</p>
+      <Button {...args} />
+    </div>
+  ),
+};
+
+export const InputFieldFilled: Story = {
+  render: () => {
+    return <input />
+  },
+  play: async () => {
+    await userEvent.type(screen.getByRole('textbox'), 'Hello world!');
+  }
+};

example/src/components/Button.test.tsx

@@ -60,3 +60,40 @@ describe('GlobalConfig', () => {
     expect(buttonElement).not.toBeNull();
   });
 });
+
+describe('CSF3', () => {
+  test('renders with inferred globalRender', () => {
+    const Primary = composeStory(
+      stories.CSF3Button,
+      stories.default
+    );
+
+    render(<Primary>Hello world</Primary>);
+    const buttonElement = screen.getByText(/Hello world/i);
+    expect(buttonElement).not.toBeNull();
+  });
+
+  test('renders with custom render function', () => {
+    const Primary = composeStory(
+      stories.CSF3ButtonWithRender,
+      stories.default
+    );
+
+    render(<Primary />);
+    expect(screen.getByTestId("custom-render")).not.toBeNull();
+  });
+
+  test('renders with play function', async () => {
+    const InputFieldFilled = composeStory(
+      stories.InputFieldFilled,
+      stories.default
+    );
+
+    render(<InputFieldFilled />);
+
+    await InputFieldFilled.play!();
+
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+    expect(input.value).toEqual('Hello world!');
+  });
+});

example/src/internals.test.tsx

@@ -13,7 +13,8 @@ test('returns composed parameters from story', () => {
   expect(StoryWithParamsAndDecorator.args).toEqual(stories.StoryWithParamsAndDecorator.args);
   expect(StoryWithParamsAndDecorator.parameters).toEqual({
     ...stories.StoryWithParamsAndDecorator.parameters,
-    ...globalConfig.parameters
+    ...globalConfig.parameters,
+    component: stories.default.component
   });
   expect(StoryWithParamsAndDecorator.decorators).toEqual([
     ...stories.StoryWithParamsAndDecorator.decorators!,