From 6c4349a836592d7390df987de5af877c86e893a2 Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 25 Oct 2022 11:36:08 +0200 Subject: [PATCH] Add explanatory comments about await act() --- packages/components/src/border-control/test/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/components/src/border-control/test/index.js b/packages/components/src/border-control/test/index.js index 2783937d355f9..922abba8f9c83 100644 --- a/packages/components/src/border-control/test/index.js +++ b/packages/components/src/border-control/test/index.js @@ -39,12 +39,18 @@ const toggleLabelRegex = /Border color( and style)* picker/; const renderBorderControl = async ( props ) => { const view = render( ); + // When the `Popover` component is rendered or updated, the `useFloating` + // hook from the `floating-ui` package will schedule a state update in a + // promise handler. We need to wait for this promise handler to execute + // before checking results. That's what this async `act()` call achieves. + // See also: https://floating-ui.com/docs/react-dom#testing await act( () => Promise.resolve() ); return view; }; const rerenderBorderControl = async ( rerender, props ) => { const view = rerender( ); + // Same reason to `act()` as in `renderBorderControl` above. await act( () => Promise.resolve() ); return view; }; @@ -52,6 +58,7 @@ const rerenderBorderControl = async ( rerender, props ) => { const openPopover = async () => { const toggleButton = screen.getByLabelText( toggleLabelRegex ); fireEvent.click( toggleButton ); + // Same reason to `act()` as in `renderBorderControl` above. await act( () => Promise.resolve() ); };