react-act-warning-repro

MyComponent.jsx

import React from 'react'

// Replace the line with the commented and the warning is shown during test. The current line doesn't cause any warnings.
// const simulatedApiCall = async () => {}
const simulatedApiCall = () => new Promise(resolve => setTimeout(resolve, 100))

const MyTest: React.FC = props => {
  const [isLoading, setLoading] = React.useState(true)
  const mounted = React.useRef(false)

  React.useEffect(() => {
    const load = async () => {
      setLoading(true)

      await simulatedApiCall()

      if (mounted.current) setLoading(false)
    }
    load()
  }, [])

  // Doesn't matter if mounted.current is set in its own useEffect (like its now), or if its set in the useEffect above.
  React.useEffect(() => {
    mounted.current = true
    return () => {
      mounted.current = false
    }
  }, [])

  return <span>Loading: {isLoading.toString()}</span>
}

export default MyTest

MyComponent.spec.tsx

import React from 'react'
import MyTest from './MyTest'
import { render, screen, act } from '@testing-library/react'

describe('<HistoryModal />', () => {
  it('should show loading when loading', () => {
    render(<MyTest />)
    // screen.debug()

    expect(screen.getByText(/true/i)).toBeInTheDocument()
    // await (async () => new Promise(resolve => setTimeout(resolve, 200)))()
    // await flush()
  })

  it('should not show loading when loaded', async () => {
    render(<MyTest />)
    // screen.debug()

    expect(await screen.findByText(/false/i)).toBeInTheDocument()
    // await (async () => new Promise(resolve => setTimeout(resolve, 200)))()
    // await flush()
  })
})