feat: support CSF3 format

- Add support for stories using object notation

Author: yannbf

example/src/components/Button.stories.tsx

@@ -51,9 +51,23 @@ 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 = {
+  args: { children: 'foo' },
+};
+
+export const CSF3ButtonWithRender = {
+  render: (args: ButtonProps) => (
+    <div>
+      <p data-testid="custom-render">I am a custom render function</p>
+      <Button {...args} />
+    </div>
+  ),
+  args: { children: 'foo' },
+};

example/src/components/Button.test.tsx

@@ -60,3 +60,28 @@ describe('GlobalConfig', () => {
     expect(buttonElement).not.toBeNull();
   });
 });
+
+describe('CSF3', () => {
+  test('renders with inferred globalRender', () => {
+    const Primary = composeStory(
+      //@ts-ignore TODO: fix this once CSF3 types are created
+      stories.CSF3Button,
+      stories.default
+    ) as any;
+
+    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(
+      //@ts-ignore TODO: fix this once CSF3 types are created
+      stories.CSF3ButtonWithRender,
+      stories.default
+    ) as any;
+
+    render(<Primary>Hello world</Primary>);
+    expect(screen.getByTestId("custom-render")).not.toBeNull();
+  });
+});

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!,

src/index.ts

@@ -3,6 +3,7 @@ import addons, { mockChannel } from '@storybook/addons';
 import type { Meta, Story, StoryContext } from '@storybook/react';
 
 import type { GlobalConfig, StoriesWithPartialProps } from './types';
+import { globalRender, isInvalidStory } from './utils';
 
 // Some addons use the channel api to communicate between manager/preview, and this is a client only feature, therefore we must mock it.
 addons.setChannel(mockChannel());
@@ -59,13 +60,14 @@ export function composeStory<GenericArgs>(
   meta: Meta,
   globalConfig: GlobalConfig = globalStorybookConfig
 ) {
-  if (typeof story !== 'function') {
+
+  if (isInvalidStory(story)) {
     throw new Error(
-      `Cannot compose story due to invalid format. @storybook/testing-react expected a function but received ${typeof story} instead.`
+      `Cannot compose story due to invalid format. @storybook/testing-react expected a function/object but received ${typeof story} instead.`
     );
   }
 
-  if((story as any).story !== undefined) {
+  if ((story as any).story !== undefined) {
     throw new Error(
       `StoryFn.story object-style annotation is not supported. @storybook/testing-react expects hoisted CSF stories.
        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations`
@@ -79,7 +81,14 @@ export function composeStory<GenericArgs>(
         'composeStory does not support legacy style stories (with passArgsFirst = false).'
       );
     }
-    return story(context.args as GenericArgs, context);
+
+    let renderFn = story
+    if (typeof story === 'object') {
+      // @ts-ignore TODO: fix this once CSF3 types are created
+      renderFn = story.render ?? globalRender;
+    }
+
+    return renderFn(context.args as GenericArgs, context);
   };
 
   const combinedDecorators = [
@@ -105,7 +114,8 @@ export function composeStory<GenericArgs>(
   const combinedParameters = combineParameters(
     globalConfig.parameters || {},
     meta.parameters || {},
-    story.parameters || {}
+    story.parameters || {},
+    { component: meta.component }
   )
 
   const combinedArgs = { 

src/utils.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { FunctionComponent } from 'react';
+import type { Story } from '@storybook/react';
+
+export const globalRender: Story = (args, { parameters }) => {
+  const Component = parameters.component as FunctionComponent;
+  return <Component {...args} />;
+};
+
+const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']);
+
+export const isInvalidStory = (story?: any) => (!story || Array.isArray(story) || invalidStoryTypes.has(typeof story))