Manual fixes

Author: eps1lon

src/__tests__/act.js

@@ -5,23 +5,23 @@ beforeEach(() => {
   global.IS_REACT_ACT_ENVIRONMENT = true
 })
 
-test('render calls useEffect immediately', () => {
+test('render calls useEffect immediately', async () => {
   const effectCb = jest.fn()
   function MyUselessComponent() {
     React.useEffect(effectCb)
     return null
   }
-  render(<MyUselessComponent />)
+  await render(<MyUselessComponent />)
   expect(effectCb).toHaveBeenCalledTimes(1)
 })
 
 test('findByTestId returns the element', async () => {
   const ref = React.createRef()
-  render(<div ref={ref} data-testid="foo" />)
+  await render(<div ref={ref} data-testid="foo" />)
   expect(await screen.findByTestId('foo')).toBe(ref.current)
 })
 
-test('fireEvent triggers useEffect calls', () => {
+test('fireEvent triggers useEffect calls', async () => {
   const effectCb = jest.fn()
   function Counter() {
     React.useEffect(effectCb)
@@ -30,32 +30,33 @@ test('fireEvent triggers useEffect calls', () => {
   }
   const {
     container: {firstChild: buttonNode},
-  } = render(<Counter />)
+  } = await render(<Counter />)
 
   effectCb.mockClear()
-  fireEvent.click(buttonNode)
+  // eslint-disable-next-line testing-library/no-await-sync-events --  TODO: Remove lint rule.
+  await fireEvent.click(buttonNode)
   expect(buttonNode).toHaveTextContent('1')
   expect(effectCb).toHaveBeenCalledTimes(1)
 })
 
-test('calls to hydrate will run useEffects', () => {
+test('calls to hydrate will run useEffects', async () => {
   const effectCb = jest.fn()
   function MyUselessComponent() {
     React.useEffect(effectCb)
     return null
   }
-  render(<MyUselessComponent />, {hydrate: true})
+  await render(<MyUselessComponent />, {hydrate: true})
   expect(effectCb).toHaveBeenCalledTimes(1)
 })
 
-test('cleans up IS_REACT_ACT_ENVIRONMENT if its callback throws', () => {
+test('cleans up IS_REACT_ACT_ENVIRONMENT if its callback throws', async () => {
   global.IS_REACT_ACT_ENVIRONMENT = false
 
-  expect(() =>
+  await expect(() =>
     act(() => {
       throw new Error('threw')
     }),
-  ).toThrow('threw')
+  ).rejects.toThrow('threw')
 
   expect(global.IS_REACT_ACT_ENVIRONMENT).toEqual(false)
 })

src/__tests__/render.js

@@ -25,9 +25,9 @@ describe('render API', () => {
     configure(originalConfig)
   })
 
-  test('renders div into document', () => {
+  test('renders div into document', async () => {
     const ref = React.createRef()
-    const {container} = render(<div ref={ref} />)
+    const {container} = await render(<div ref={ref} />)
     expect(container.firstChild).toBe(ref.current)
   })
 
@@ -62,20 +62,20 @@ describe('render API', () => {
       )
     }
 
-    const {unmount} = render(<MyPortal />)
+    const {unmount} = await render(<MyPortal />)
     expect(screen.getByText('Hello World')).toBeInTheDocument()
     const portalNode = screen.getByTestId('my-portal')
     expect(portalNode).toBeInTheDocument()
     unmount()
     expect(portalNode).not.toBeInTheDocument()
   })
 
-  test('returns baseElement which defaults to document.body', () => {
-    const {baseElement} = render(<div />)
+  test('returns baseElement which defaults to document.body', async () => {
+    const {baseElement} = await render(<div />)
     expect(baseElement).toBe(document.body)
   })
 
-  test('supports fragments', () => {
+  test('supports fragments', async () => {
     class Test extends React.Component {
       render() {
         return (
@@ -86,16 +86,16 @@ describe('render API', () => {
       }
     }
 
-    const {asFragment} = render(<Test />)
+    const {asFragment} = await render(<Test />)
     expect(asFragment()).toMatchSnapshot()
   })
 
-  test('renders options.wrapper around node', () => {
+  test('renders options.wrapper around node', async () => {
     const WrapperComponent = ({children}) => (
       <div data-testid="wrapper">{children}</div>
     )
 
-    const {container} = render(<div data-testid="inner" />, {
+    const {container} = await render(<div data-testid="inner" />, {
       wrapper: WrapperComponent,
     })
 
@@ -111,13 +111,13 @@ describe('render API', () => {
   `)
   })
 
-  test('renders options.wrapper around node when reactStrictMode is true', () => {
+  test('renders options.wrapper around node when reactStrictMode is true', async () => {
     configure({reactStrictMode: true})
 
     const WrapperComponent = ({children}) => (
       <div data-testid="wrapper">{children}</div>
     )
-    const {container} = render(<div data-testid="inner" />, {
+    const {container} = await render(<div data-testid="inner" />, {
       wrapper: WrapperComponent,
     })
 
@@ -133,7 +133,7 @@ describe('render API', () => {
   `)
   })
 
-  test('renders twice when reactStrictMode is true', () => {
+  test('renders twice when reactStrictMode is true', async () => {
     configure({reactStrictMode: true})
 
     const spy = jest.fn()
@@ -142,7 +142,7 @@ describe('render API', () => {
       return null
     }
 
-    render(<Component />)
+    await render(<Component />)
     expect(spy).toHaveBeenCalledTimes(2)
   })
 
@@ -152,7 +152,7 @@ describe('render API', () => {
       React.useEffect(() => spy, [])
       return null
     }
-    const {unmount} = render(<Component />)
+    const {unmount} = await render(<Component />)
     expect(spy).toHaveBeenCalledTimes(0)
 
     unmount()
@@ -163,11 +163,11 @@ describe('render API', () => {
   test('can be called multiple times on the same container', () => {
     const container = document.createElement('div')
 
-    const {unmount} = render(<strong />, {container})
+    const {unmount} = await render(<strong />, {container})
 
     expect(container).toContainHTML('<strong></strong>')
 
-    render(<em />, {container})
+    await render(<em />, {container})
 
     expect(container).toContainHTML('<em></em>')
 
@@ -176,7 +176,7 @@ describe('render API', () => {
     expect(container).toBeEmptyDOMElement()
   })
 
-  test('hydrate will make the UI interactive', () => {
+  test('hydrate will make the UI interactive', async () => {
     function App() {
       const [clicked, handleClick] = React.useReducer(n => n + 1, 0)
 
@@ -193,14 +193,14 @@ describe('render API', () => {
 
     expect(container).toHaveTextContent('clicked:0')
 
-    render(ui, {container, hydrate: true})
+    await render(ui, {container, hydrate: true})
 
-    fireEvent.click(container.querySelector('button'))
+    await fireEvent.click(container.querySelector('button'))
 
     expect(container).toHaveTextContent('clicked:1')
   })
 
-  test('hydrate can have a wrapper', () => {
+  test('hydrate can have a wrapper', async () => {
     const wrapperComponentMountEffect = jest.fn()
     function WrapperComponent({children}) {
       React.useEffect(() => {
@@ -214,7 +214,7 @@ describe('render API', () => {
     document.body.appendChild(container)
     container.innerHTML = ReactDOMServer.renderToString(ui)
 
-    render(ui, {container, hydrate: true, wrapper: WrapperComponent})
+    await render(ui, {container, hydrate: true, wrapper: WrapperComponent})
 
     expect(wrapperComponentMountEffect).toHaveBeenCalledTimes(1)
   })
@@ -252,13 +252,13 @@ describe('render API', () => {
     )
   })
 
-  testGateReact19('legacyRoot throws even with hydrate', () => {
+  testGateReact19('legacyRoot throws even with hydrate', async () => {
     const ui = <div />
     const container = document.createElement('div')
     container.innerHTML = ReactDOMServer.renderToString(ui)
-    expect(() => {
-      render(ui, {container, hydrate: true, legacyRoot: true})
-    }).toThrowErrorMatchingInlineSnapshot(
+    await expect(
+      render(ui, {container, hydrate: true, legacyRoot: true}),
+    ).rejects.toThrowErrorMatchingInlineSnapshot(
       `\`legacyRoot: true\` is not supported in this version of React. If your app runs React 19 or later, you should remove this flag. If your app runs React 18 or earlier, visit https://react.dev/blog/2022/03/08/react-18-upgrade-guide for upgrade instructions.`,
     )
   })

src/__tests__/renderHook.js

@@ -7,8 +7,8 @@ const isReact19 = React.version.startsWith('19.')
 const testGateReact18 = isReact18 ? test : test.skip
 const testGateReact19 = isReact19 ? test : test.skip
 
-test('gives committed result', () => {
-  const {result} = renderHook(() => {
+test('gives committed result', async () => {
+  const {result} = await renderHook(() => {
     const [state, setState] = React.useState(1)
 
     React.useEffect(() => {

src/__tests__/rerender.js

@@ -19,7 +19,7 @@ describe('rerender API', () => {
 
   test('rerender will re-render the element', () => {
     const Greeting = props => <div>{props.message}</div>
-    const {container, rerender} = render(<Greeting message="hi" />)
+    const {container, rerender} = await render(<Greeting message="hi" />)
     expect(container.firstChild).toHaveTextContent('hi')
     rerender(<Greeting message="hey" />)
     expect(container.firstChild).toHaveTextContent('hey')
@@ -34,7 +34,7 @@ describe('rerender API', () => {
     const firstValue = 'hello'
     initialInputElement.value = firstValue
 
-    const {rerender} = render(<input value="" onChange={() => null} />, {
+    const {rerender} = await render(<input value="" onChange={() => null} />, {
       container,
       hydrate: true,
     })
@@ -53,7 +53,7 @@ describe('rerender API', () => {
       <div data-testid="wrapper">{children}</div>
     )
     const Greeting = props => <div>{props.message}</div>
-    const {container, rerender} = render(<Greeting message="hi" />, {
+    const {container, rerender} = await render(<Greeting message="hi" />, {
       wrapper: WrapperComponent,
     })
 
@@ -88,7 +88,7 @@ describe('rerender API', () => {
       return null
     }
 
-    const {rerender} = render(<Component />)
+    const {rerender} = await render(<Component />)
     expect(spy).toHaveBeenCalledTimes(2)
 
     spy.mockClear()