Tip: change default timeout of `waitFor` in React Testing Library

In React Testing Library, there is no global configuration to change default timeout of waitFor, but we can easily wrap this function to provide our own default values.

That is, we can create a waitFor.ts file under test-utils folder as shown below:

In this file, we import the original waitFor function from @testing-library/react as _waitFor, and invoke it internally in our wrapped version with the new defaults (e.g., we changed the timeout to 5000ms).

Also, one important note is that we didn’t change the signiture and funcionality of the original function, so that it can be recognized as the drop-in replacement of the original version.

That is, we now just need to replace the import statements in other files from

import { waitFor } from "@testing-library/react";

…to:

import { waitFor } from "test-utils/waitFor";

… and the default timeout of waitFor is changed/overwrited :D

Apart from that, this tip can be applied to other places as well (e.g., to overwrite the default behaviour of render, etc.)