Jest test dynamic React children

dynamicContent.test.js

  describe('dynamic content', () => {
    beforeAll(() => {
      jest.useFakeTimers()
    })
    afterAll(() => {
      jest.useRealTimers()
    })
    it('allows tabbing to dynamic child', async () => {
      const DynamicChildren = () => {
        const [showButton, setShowButton] = React.useState(false)

        React.useEffect(() => {
          setTimeout(() => {
            setShowButton(true)
          }, 1000)
        }, [])

        return (
          <FocusManager trapped={true} autofocus={true}>
            <Button>Is tabbable</Button>
            {showButton && <Button>Should be tabbable</Button>}
          </FocusManager>
        )
      }
      render(<DynamicChildren />)

      act(() => jest.advanceTimersByTime(2000))
      userEvent.tab()

      expect(document.activeElement).toHaveTextContent('Should be tabbable')
    })
  })