jest.useFakeTimers are not working after update to version 8

• @testing-library/dom version: 8.1.0
• Testing Framework and version: jest 26.6.0
• DOM Environment: jsdom 16.4.0

Relevant code or config:

const App = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    let isSubscribed = true
    let timeoutId: NodeJS.Timeout

    const updateCount = async () => {
      try {
        const response = await fetch('index.html')
        const content = await response.text()
        
        if (isSubscribed) {
          console.log(content)
          setCount(prev => prev + 1)
        } 
      }catch (err) {
        console.error(err)
      }

      timeoutId = setTimeout(updateCount, 10000)
    }

    updateCount()

    return () => {
      isSubscribed = false
      clearTimeout(timeoutId)
    }
  }, [])

  return (
    <div>
      Count: {count}
    </div>
  );
}

it('should display name', async () => {
  jest.useFakeTimers()

  const mockText = jest.fn()
  mockFetch.mockImplementation(() => Promise.resolve({ text: mockText }))
  mockText.mockReturnValue(Promise.resolve('1.0.0'))

  render(<App />);
  
  expect(mockFetch).toHaveBeenCalledTimes(1)

  act(() => {
    jest.runOnlyPendingTimers()
  })

  await waitFor(() => {
    expect(mockFetch).toHaveBeenCalledTimes(2 )
  })
});

What you did:

Updating @testing-library/react from 11.2.7 to 12.0.0 which updates @testing-library/dom from 7.31.2 to 8.1.0

What happened:

Test with using jest.useFakeTimers() were failing

Reproduction:

GitHub-Repo: https://github.com/netcoding87/fake-timers

Clone repo. => Branch master is working with @testing-library/dom 7.31.2 => Test is passing => Branch update-testing-lib with @testing-library/dom 8.1.0 => Test is failing

Problem description:

I read the recommendations for release 8.0.0 but using modern timers did also not work.

Suggested solution:

[eps1lon]

This looks like it’s just a timeout issue. Everything is passing with

  await waitFor(() => {
    expect(mockFetch).toHaveBeenCalledTimes(2 )
  }, { timeout: 11000 }

Looks like it’s running a bit slower in fake timers now.

Will keep an eye on it but for now this seems minor enough to ignore i.e. just recommend increasing the timeout.

[adnan-sheikh]

I am experiencing somewhat similar issue. I am on CRA setup and I upgraded react-scripts to 5.0.0.

Previously I was on: “@testing-library/jest-dom”: “^5.11.4”, “@testing-library/react”: “^11.1.0”,

and then I upgraded to: “@testing-library/jest-dom”: “^5.16.1”, “@testing-library/react”: “^12.1.2”,

but now my tests are failing,

beforeEach(() => {
  jest.useFakeTimers()
}

afterEach(() => {
  jest.useRealTimers()
}
.
.
.
render(<Component />);
await waitForElementToBeRemoved(() => screen.queryByTestId("loader"));
//   ^? Test is failing here "waitFor... getting timedout"

before upgrading it was passing I’m using MSW for mocking.

If i’m not using fake timers, test passes But, I need fake timers to skip setTimeout on a notification component, as I am waiting for it to be removed at the end of test. Any help?