Stale DOM with fake timers in jest 27.x

[marvinhagemeister]

• preact-testing-library version: 2.0.1
• preact version: 10.5.15
• node version: 16.11.1
• npm (or yarn) version: 8.0.0

Relevant code or config

What you did:

What happened:

Reproduction repository:

const { h } = require("preact"); /** @jsx h */
const { useState, useEffect } = require("preact/hooks");
const { render, waitFor, screen } = require("@testing-library/preact");

jest.useFakeTimers();

const apiCall = () => {
  return new Promise((resolve, reject) => {
    resolve();
  });
};

function Comp() {
  const [val, setVal] = useState("original value");

  useEffect(() => {
    const interval = setInterval(() => {
      apiCall().then(() => {
        setVal("timeout value");
      });
    }, 300); // <- 300ms delay
    console.log("call eff");
    apiCall().then(() => {
      console.log("resolve eff");
      setVal("effect value");
    });
    return () => {
      clearInterval(interval);
    };
  }, []);

  console.log("render", val);

  return <div>{val}</div>;
}

it("fails", async () => {
  const wrapper = render(<Comp />);
  const { container } = wrapper;

  expect(container.textContent).toEqual("original value");

  await waitFor(() => {
    console.log("check", container.textContent);
    expect(container.textContent).toEqual("effect value");
  });
  jest.advanceTimersByTime(1000);

  await waitFor(() => {
    expect(container.textContent).toEqual("timeout value");
  });
});

Problem description:

Due to the fake timers usage the first waitFor call times out. The DOM value is stale and never updated, despite the component correctly being re-rendered.

Suggested solution:

This issue is resolved by forcefully updating the dependency on @testing-library/dom to the latest version 8.10.1.

[JoviDeCroock]

Bumped as of PTL 3.0.0