I am trying to do a test of my understanding of react hooks by using Jest.

Specifically I want to test out a simple rerender after a timeout (which I mock using useFakeTimers())

import { render } from '@testing-library/react';
import { useEffect, useState } from 'react';
import { delay } from './delay';
describe('useState', () => {
  it("should set rerender when setting state", async () => {
    jest.useFakeTimers();
    let renderCount = 0;
    function MyComponent() {
      const [foo, setFoo] = useState("bar");
      ++renderCount;
      useEffect(() => {
        (async function asyncEffect() {
          await delay(1000);
          setFoo("mew")
        })()
      }, [])
      return (<div data-testid="test">{foo}</div>);
    }

    const { getByTestId } = render(<MyComponent />)
    expect(getByTestId("test").textContent).toEqual("bar");
    expect(renderCount).toEqual(1);
    jest.runAllTimers();
    expect(getByTestId("test").textContent).toEqual("mew");
    expect(renderCount).toEqual(2);
  })

  afterEach(() => {
    jest.useRealTimers();
  })
})

But I am getting