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'); });