Merge pull request #30191 from storybookjs/valentin/fix-act-running-s…

…imultaneously React: Force act running always in sequence
storybookjs · Jan 7, 2025 · f6a6867 · f6a6867
2 parents b59cfc1 + b066e56
commit f6a6867
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx
@@ -67,7 +67,7 @@ describe('renders', () => {
   });
 
   it('should throw error when rendering a component with a render error', async () => {
-    await expect(() => ThrowsError.run()).rejects.toThrowError('Error in render');
+    await expect(ThrowsError.run()).rejects.toThrowError('Error in render');
   });
 
   it('should render component mounted in play function', async () => {
@@ -77,8 +77,8 @@ describe('renders', () => {
     expect(screen.getByTestId('loaded-data').textContent).toEqual('loaded data');
   });
 
-  it('should throw an error in play function', () => {
-    expect(() => MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play');
+  it('should throw an error in play function', async () => {
+    await expect(MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play');
   });
 
   it('should call and compose loaders data', async () => {

diff --git a/code/renderers/react/src/renderToCanvas.tsx b/code/renderers/react/src/renderToCanvas.tsx
@@ -45,6 +45,23 @@ class ErrorBoundary extends ReactComponent<{
 
 const Wrapper = FRAMEWORK_OPTIONS?.strictMode ? StrictMode : Fragment;
 
+const actQueue: (() => Promise<void>)[] = [];
+let isActing = false;
+
+const processActQueue = async () => {
+  if (isActing || actQueue.length === 0) {
+    return;
+  }
+
+  isActing = true;
+  const actTask = actQueue.shift();
+  if (actTask) {
+    await actTask();
+  }
+  isActing = false;
+  processActQueue();
+};
+
 export async function renderToCanvas(
   {
     storyContext,
@@ -81,8 +98,18 @@ export async function renderToCanvas(
     unmountElement(canvasElement);
   }
 
-  await act(async () => {
-    await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
+  await new Promise<void>(async (resolve, reject) => {
+    actQueue.push(async () => {
+      try {
+        await act(async () => {
+          await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
+        });
+        resolve();
+      } catch (e) {
+        reject(e);
+      }
+    });
+    processActQueue();
   });
 
   return async () => {