Merge pull request #31335 from adamscybot/fix-pass-functions-playwright-portable-stories

Portable stories: Fix playwright CT to allow functions to be passed as props

(cherry picked from commit d1eab95)

Author: yannbf

code/core/src/preview-api/modules/store/csf/portable-stories.ts

@@ -301,7 +301,9 @@ export function composeStories<TModule extends Store_CSFExports>(
   return composedStories;
 }
 
-type WrappedStoryRef = { __pw_type: 'jsx' | 'importRef' };
+type WrappedStoryRef =
+  | { __pw_type: 'jsx'; props: Record<string, any> }
+  | { __pw_type: 'importRef' };
 type UnwrappedJSXStoryRef = {
   __pw_type: 'jsx';
   type: UnwrappedImportStoryRef;
@@ -341,12 +343,16 @@ export function createPlaywrightTest<TFixture extends { extend: any }>(
             `);
         }
 
+        // Props are not necessarily serialisable and so can't be passed to browser via
+        // `page.evaluate`. Regardless they are not needed for storybook load/play steps.
+        const { props, ...storyRefWithoutProps } = storyRef;
+
         await page.evaluate(async (wrappedStoryRef: WrappedStoryRef) => {
           const unwrappedStoryRef = await globalThis.__pwUnwrapObject?.(wrappedStoryRef);
           const story =
             '__pw_type' in unwrappedStoryRef ? unwrappedStoryRef.type : unwrappedStoryRef;
           return story?.load?.();
-        }, storyRef);
+        }, storyRefWithoutProps);
 
         // mount the story
         const mountResult = await mount(storyRef, ...restArgs);
@@ -358,7 +364,7 @@ export function createPlaywrightTest<TFixture extends { extend: any }>(
             '__pw_type' in unwrappedStoryRef ? unwrappedStoryRef.type : unwrappedStoryRef;
           const canvasElement = document.querySelector('#root');
           return story?.play?.({ canvasElement });
-        }, storyRef);
+        }, storyRefWithoutProps);
 
         return mountResult;
       });

test-storybooks/portable-stories-kitchen-sink/react/stories/Button.playwright.tsx

@@ -18,11 +18,14 @@ test('renders with composeStory (singular)', async ({ mount }) => {
 });
 
 test('renders story with props', async ({ mount }) => {
+  let called = false
   const component = await mount(
-    <stories.CSF3Button primary={true}>child from test</stories.CSF3Button>
+    <stories.CSF3Button primary={true} onClick={() => { called = true }}>child from test</stories.CSF3Button>
   );
   await expect(component).toContainText('child from test');
   await expect(component.getByRole('button')).toHaveClass(/storybook-button--primary/);
+  await component.getByRole('button').click()
+  await expect(called).toBe(true)
 });
 
 test('renders story with custom render', async ({ mount }) => {