Source:  Twitter logo

According to the react unit testing documentation:


To prepare a component for assertions, wrap the code rendering it and performing updates inside an act() call. This makes your test run closer to how React works in the browser.

But the test runs perfectly fine in both cases:

Without act()

it('Should return some text', () => {
  render(<TestComponent />, container);
  expect(container.textContent).toBe('some text');

With act()

it('Should return some text', () => {
  act(() => {
    render(<TestComponent />, container);

  expect(container.textContent).toBe('some text');

The questions is: What exactly act() does, and when should someone use it?

From the act() docs:

When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of interaction with a user interface. React provides a helper called act() that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions

Further reading and examples:

23 users liked answer #0dislike answer #023
slideshowp2 profile pic

In simple terms:

ReactTestUtil's act() makes sure that anything that might take time - rendering, user events, data fetching - within it is completed before test assertions are run.

act(() => {
    // render components
    // make assertions

If you're using a library like React Testing Library, then things like the render function are already wrapped in act(), and you generally will not need to use it explicitly.

Note that React Testing Library does have it's own act() function, which is simply a wrapper for ReactTestUtil's act(). This may be useful in asynchronous state updates, though other React Testing Library tools like waitFor may be better.

10 users liked answer #1dislike answer #110
Andrew profile pic

Basically, act() is used to simulate like react actually works. But if you use render from @testing-library/react, it comes with act() implicitly. You can read more about it in the documentation.

1 users liked answer #2dislike answer #21
Nicolás Garcés profile pic
Nicolás Garcés

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).