Fix tests

code/lib/react-dom-shim/src/react-18.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 import type { FC, ReactElement } from 'react';
 import * as React from 'react';
 import type { Root as ReactRoot, RootOptions } from 'react-dom/client';
@@ -22,15 +23,26 @@ const WithCallback: FC<{ callback: () => void; children: ReactElement }> = ({
   return children;
 };
 
+// pony-fill
+if (typeof Promise.withResolvers === 'undefined') {
+  Promise.withResolvers = <T extends unknown>() => {
+    let resolve: PromiseWithResolvers<T>['resolve'] = null!;
+    let reject: PromiseWithResolvers<T>['reject'] = null!;
+    const promise = new Promise<T>((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+    return { promise, resolve, reject };
+  };
+}
+
 export const renderElement = async (node: ReactElement, el: Element, rootOptions?: RootOptions) => {
   // Create Root Element conditionally for new React 18 Root Api
   const root = await getReactRoot(el, rootOptions);
 
-  return new Promise((resolve) => {
-    preventActChecks(() =>
-      root.render(<WithCallback callback={() => resolve(null)}>{node}</WithCallback>)
-    );
-  });
+  const { promise, resolve } = Promise.withResolvers<void>();
+  preventActChecks(() => root.render(<WithCallback callback={resolve}>{node}</WithCallback>));
+  return promise;
 };
 
 export const unmountElement = (el: Element, shouldUseNewRootApi?: boolean) => {

code/renderers/react/src/__test__/Button.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { within, userEvent, fn, expect } from '@storybook/test';
 import type { StoryFn as CSF2Story, StoryObj as CSF3Story, Meta } from '..';
 
@@ -87,6 +87,33 @@ export const CSF3ButtonWithRender: CSF3Story<ButtonProps> = {
   ),
 };
 
+export const HooksStory: CSF3Story = {
+  render: function Component() {
+    const [isClicked, setClicked] = useState(false);
+    return (
+      <>
+        <input data-testid="input" />
+        <br />
+        <button onClick={() => setClicked(!isClicked)}>
+          I am {isClicked ? 'clicked' : 'not clicked'}
+        </button>
+      </>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    console.log('start of play function');
+    const canvas = within(canvasElement);
+    await step('Step label', async () => {
+      const inputEl = canvas.getByTestId('input');
+      const buttonEl = canvas.getByRole('button');
+      await userEvent.click(buttonEl);
+      await userEvent.type(inputEl, 'Hello world!');
+      await expect(inputEl).toHaveValue('Hello world!');
+    });
+    console.log('end of play function');
+  },
+};
+
 export const CSF3InputFieldFilled: CSF3Story = {
   render: () => {
     return <input data-testid="input" />;

code/renderers/react/src/__test__/portable-stories.test.tsx

@@ -144,6 +144,15 @@ describe('CSF3', () => {
 
     document.body.removeChild(div);
   });
+
+  it('renders with hooks', async () => {
+    const HooksStory = composeStory(stories.HooksStory, stories.default);
+
+    await HooksStory.run();
+
+    const input = screen.getByTestId('input') as HTMLInputElement;
+    expect(input.value).toEqual('Hello world!');
+  });
 });
 
 // common in addons that need to communicate between manager and preview

test-storybooks/portable-stories-kitchen-sink/react/.storybook/preview.tsx

@@ -8,7 +8,7 @@ const preview: Preview = {
       <div data-testid="global-decorator">
         Global Decorator
         <br />
-        {StoryFn()}
+        <StoryFn />
       </div>
     ),
   ],

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

@@ -88,15 +88,6 @@ describe('CSF3', () => {
     render(<Primary />);
     expect(screen.getByTestId('custom-render')).not.toBeNull();
   });
-
-  it('renders with play function', async () => {
-    const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);
-
-    await CSF3InputFieldFilled.run();
-
-    const input = screen.getByTestId('input') as HTMLInputElement;
-    expect(input.value).toEqual('Hello world!');
-  });
 });
 
 // common in addons that need to communicate between manager and preview