From ce4a5c907edd6f11b5eb54bd481f36c11cc0ed20 Mon Sep 17 00:00:00 2001 From: fbellinder Date: Fri, 14 Aug 2026 13:23:07 +0200 Subject: [PATCH] Fix act() dispatch example using button before it is defined The event example called button.dispatchEvent before const button was declared, which would throw at runtime. Also drop it.only from the docs snippet. --- src/content/reference/react/act.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react/act.md b/src/content/reference/react/act.md index 007e2cb0fe1..d1683cc30fd 100644 --- a/src/content/reference/react/act.md +++ b/src/content/reference/react/act.md @@ -117,26 +117,27 @@ Using `act` ensures that all updates have been applied before we make assertions To test events, wrap the event dispatch inside `act()`: -```js {14,16} +```js {16,17} import {act} from 'react'; import ReactDOMClient from 'react-dom/client'; import Counter from './Counter'; -it.only('can render and update a counter', async () => { +it('can render and update a counter', async () => { const container = document.createElement('div'); document.body.appendChild(container); - await act( async () => { + await act(async () => { ReactDOMClient.createRoot(container).render(); }); + const button = container.querySelector('button'); + const label = container.querySelector('p'); + // ✅ Dispatch the event inside act(). await act(async () => { button.dispatchEvent(new MouseEvent('click', { bubbles: true })); }); - const button = container.querySelector('button'); - const label = container.querySelector('p'); expect(label.textContent).toBe('You clicked 1 times'); expect(document.title).toBe('You clicked 1 times'); });