Merge pull request #37 from storybookjs/feat/support-csf3-format

feat: support CSF3 format

Author: yannbf

README.md

@@ -126,6 +126,68 @@ test('onclick handler is called', async () => {
 });
 ```
 
+### Reusing story properties
+
+The components returend by `composeStories` or `composeStory` not only can be rendered as React components, but also come with the combined properties from story, meta and global configuration. This means that if you want to access `args` or `parameters`, for instance, you can do so:
+
+```tsx
+import { render, screen } from '@testing-library/react';
+import { composeStory } from '@storybook/testing-react';
+import * as stories from './Button.stories';
+
+const { Primary } = composeStories(stories);
+
+test('reuses args from composed story', () => {
+  render(<Primary />);
+
+  const buttonElement = screen.getByRole('button');
+  // Testing against values coming from the story itself! No need for duplication
+  expect(buttonElement.textContent).toEqual(Primary.args.children);
+});
+```
+
+> **If you're using Typescript**: Given that some of the returned properties are not required, typescript might perceive them as nullable properties and present an error. If you are sure that they exist (e.g. certain arg that is set in the story), you can use the [non-null assertion operator](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator) to tell typescript that it's all good:
+
+```tsx
+// ERROR: Object is possibly 'undefined'
+Primary.args.children;
+
+// SUCCESS: 🎉
+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. 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:
+
+```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:
@@ -151,7 +213,6 @@ Type inference is only possible in projects that have either `strict` or `strict
 }
 ```
 
-
 ### Disclaimer
 
 For the types to be automatically picked up, your stories must be typed. See an example:

example/package.json

@@ -35,10 +35,10 @@
     "typescript": "^3.9.7"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^6.4.0-alpha.12",
-    "@storybook/react": "^6.4.0-alpha.12",
-    "@storybook/components": "^6.4.0-alpha.12",
-    "@storybook/theming": "^6.4.0-alpha.12",
+    "@storybook/addon-essentials": "^6.4.0-alpha.17",
+    "@storybook/react": "^6.4.0-alpha.17",
+    "@storybook/components": "^6.4.0-alpha.17",
+    "@storybook/theming": "^6.4.0-alpha.17",
     "@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!,