diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx index 85f33c9a714a..fcb278628b7b 100644 --- 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 index 4ae1acbb7fe9..57c1086cee1b 100644 --- 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)[] = []; +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(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 () => {