userEvent not working properly with jest.useFakeTimers

[aakashsardana]

• @testing-library/react version: 12.1.4
• @testing-library/user-event version: 14.2.1
• jest version: 26.6.3
• react version: 16.14.0
• node version: 14.17.4

Relevant code or config:

// App.js
import React, { useEffect, useState } from "react";

export default function App() {
  const [error, setError] = useState(null);

  useEffect(() => {
    let timeoutId;
    if (error) {
      timeoutId = setTimeout(() => {
        setError(null);
      }, 2500);
    }
    return () => {
      clearTimeout(timeoutId);
    };
  }, [error]);

  return (
    <div>
      <button onClick={() => setError("Something went wrong")}>Show error</button>
      <div>{error}</div>
    </div>
  );
}

// App.test.js

import React from "react";
import App from "./App";
import { render, screen, waitFor, act } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

test("shows error on button click and clears after some time", async () => {
  jest.useFakeTimers();
  render(<App />);
  const user = userEvent.setup();

  const errorBtn = screen.getByText(/show error/i);

  user.click(errorBtn);

  expect(screen.getByText(/something went wrong/i)).toBeInTheDocument();

  act(() => {
    jest.runAllTimers();
  });

  expect(screen.queryByText(/something went wrong/i)).not.toBeInTheDocument();
});

What you did:

Here we have a scenario that on clicking on a button we show some error and that error disappears after 2500ms. I am writing test cases for this scenario but when using jest.useFakeTimers with userEvent I am getting an error Timeout - Async callback was not invoked within the 5000ms . The interesting thing is this error does not come when I replace userEvent with fireEvent.

What happened:

Reproduction:

I am not able to create a CodeSandbox for this as jest.useFakeTimers is not supported by CodeSandbox but the code is working. One can simply copy and paste the code in their react project.

Problem description:

Suggested solution:

[ph-fritsche]

https://testing-library.com/docs/user-event/intro/#writing-tests-with-userevent
https://typescript-eslint.io/rules/no-floating-promises/

https://testing-library.com/docs/user-event/options#advancetimers

[opsidao]

For anyone having this issue, in my case, the trick was to pass { delay: null } to the setup call to prevent RTL from using setInterval internally.

[ph-fritsche]

@opsidao The trick is to await the promise and use the advanceTimers option.

delay: null should only be used if it is necessary and the implications are fully understood.

[delay] moves the next changes at least to the next macro task and allows other (asynchronous) code to run between events.

[opsidao]

@opsidao The trick is to await the promise and use the advanceTimers option.

delay: null should only be used if it is necessary and the implications are fully understood.

[delay] moves the next changes at least to the next macro task and allows other (asynchronous) code to run between events.

Well @ph-fritsche, like most things in life, it depends 😉.

I've created a little example project at https://github.com/opsidao/delay-null-example to show the specific case I had to solve, but here's the gist of it. If you have something like this:

interface IProps {
  callback: (arg: number) => void;
}

function App({ callback }: IProps) {
  const runCallback = React.useCallback(() => {
    callback(0);

    // We need to have this second call happen in the next event loop.
    setTimeout(() => callback(1), 0);
  }, [callback]);

  return <button onClick={runCallback} />;
}

Then you must set delay to null if you want to have control over when that second callback is executed. Otherwise, you either get an error or you get both callback calls executed directly while awaiting for the click:

So, given a test file like this:

import React from "react";
import { render, screen } from "@testing-library/react";
import App from "./App";
import userEvent from "@testing-library/user-event";

describe("App", () => {
  beforeEach(() => {
    jest.useFakeTimers();
  });

  describe("with not parameters to setup", () => {
    it('throws "Exceeded timeout of 5000 ms for a test.', async () => {
      const callback = jest.fn();
      const user = userEvent.setup();

      render(<App callback={callback} />);

      await user.click(screen.getByRole("button"));

      expect(callback).toHaveBeenCalledWith(0);
    });
  });

  describe("with advabceTimers set to jest.advanceTimersByTime", () => {
    it("advances all timers too fast", async () => {
      const callback = jest.fn();
      const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });

      render(<App callback={callback} />);

      await user.click(screen.getByRole("button"));

      expect(callback).toHaveBeenCalledWith(0);
      expect(callback).not.toHaveBeenCalledWith(1);
    });
  });

  describe("with delay set to null", () => {
    it("allows to manage the timers on your own", async () => {
      const callback = jest.fn();
      const user = userEvent.setup({ delay: null });

      render(<App callback={callback} />);

      await user.click(screen.getByRole("button"));

      expect(callback).toHaveBeenCalledWith(0);
      expect(callback).not.toHaveBeenCalledWith(1);

      jest.runAllTimers();

      expect(callback).toHaveBeenCalledWith(1);
    });
  });
});

The first two tests will fail, while the third one will succeed:

 FAIL  src/App.test.tsx (5.613 s)
  App
    with not parameters to setup
      ✕ throws "Exceeded timeout of 5000 ms for a test. (5008 ms)
    with advabceTimers set to jest.advanceTimersByTime
      ✕ advances all timers too fast (29 ms)
    with delay set to null
      ✓ allows to manage the timers on your own (7 ms)

  ● App › with not parameters to setup › throws "Exceeded timeout of 5000 ms for a test.

    thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

      10 |
      11 |   describe("with not parameters to setup", () => {
    > 12 |     it('throws "Exceeded timeout of 5000 ms for a test.', async () => {
         |     ^
      13 |       const callback = jest.fn();
      14 |       const user = userEvent.setup();
      15 |

      at src/App.test.tsx:12:5
      at src/App.test.tsx:11:3
      at Object.<anonymous> (src/App.test.tsx:6:1)

  ● App › with advabceTimers set to jest.advanceTimersByTime › advances all timers too fast

    expect(jest.fn()).not.toHaveBeenCalledWith(...expected)

    Expected: not 1
    Received
           2:     1

    Number of calls: 2

      32 |
      33 |       expect(callback).toHaveBeenCalledWith(0);
    > 34 |       expect(callback).not.toHaveBeenCalledWith(1);
         |                            ^
      35 |     });
      36 |   });
      37 |

      at Object.<anonymous> (src/App.test.tsx:34:28)

[ph-fritsche]

The described event handler design might be a mistake to begin with, but if that design is necessary, the following variants of the test ensure what is described in the test without the false confidence of delay: null.

  describe("better ways to test the component", () => {
    test("treat internals as implementation details", async () => {
      const callback = jest.fn()
      const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime})
      render(<App callback={callback} />);

      await user.click(screen.getByRole('button'))

      expect(callback).toHaveBeenCalledTimes(2)
      expect(callback).toHaveBeenNthCalledWith(1, 0)
      expect(callback).toHaveBeenNthCalledWith(2, 1)
    })

    test("assert behavior on a specific event", async () => {
      const callback = jest.fn()
      const callbackStateOnClick: unknown[] = []
      document.addEventListener('click', () => callbackStateOnClick.push(callback.mock.lastCall))
      const user = userEvent.setup({advanceTimers: jest.advanceTimersByTime})
      render(<App callback={callback} />);

      await user.click(screen.getByRole('button'))

      expect(callback).toHaveBeenCalledTimes(2)
      expect(callback).toHaveBeenLastCalledWith(1)
      expect(callbackStateOnClick).toEqual([[0]])
    })

    test("explicitly test specific event", async () => {
      const callback = jest.fn()
      render(<App callback={callback} />);

      fireEvent.click(screen.getByRole('button'))

      expect(callback).toHaveBeenCalledTimes(1)
      expect(callback).toHaveBeenNthCalledWith(1, 0)

      jest.runAllTimers()

      expect(callback).toHaveBeenCalledTimes(2)
      expect(callback).toHaveBeenNthCalledWith(2, 1)
    })

    test("assert state when winding timers", async () => {
      const callback = jest.fn()
      const callbackStateBeforeWinding: unknown[] = []
      const user = userEvent.setup({advanceTimers: t => {
        callbackStateBeforeWinding.push(callback.mock.lastCall)
        jest.advanceTimersByTime(t)
      }})
      render(<App callback={callback} />);

      await user.click(screen.getByRole("button"))

      expect(callbackStateBeforeWinding).toContainEqual([0])
      expect(callback).toHaveBeenLastCalledWith(1)
    })
  })