When to use act() in jest unit tests with react-dom

Question

According to the react unit testing documentation:

act()

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?

Weaks

Answer 1

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: https://github.com/mrdulin/react-act-examples/blob/master/sync.md

Collect

Why this piece of text is not already in the act() documentation? – Mettah

Unfortunately the content of the link seems to be outdated. Most examples don't work anymore / work differently now. ( Details: Where the author claim act is needed, it's actually not needed. Where the author claims xxx will help, it doesn't) – Inappropriate

@lin-du is there anything in your forked repo that wasn't in the original one? github.com/threepointone/react-act-examples/blob/master/sync.md – Iridize

Would you say that act() waits for the useEffect to complete itself before applying the expect()? – Birthwort

Answer 2

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.

Hagen

If you have async code inside it you need to add await act(async () => { – Cheese

It seems await is only required when the handle is async. The code also contains warnings when not used properly. github.com/facebook/react/blob/main/packages/react-dom/src/… > react/blob/29fbf6f62625c4262035f931681c7b7822ca9843/packages/react/index.js#L33 > react/blob/29fbf6f62625c4262035f931681c7b7822ca9843/packages/react/src/ReactClient.js > react/blob/29fbf6f62625c4262035f931681c7b7822ca9843/packages/react/src/ReactAct.js – Aerometer

Answer 3

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.

Bussy

Answer 4

I dont have in-depth knowledge on this topic, following are just my personal understandings

in short

• when you call codes like render()/ some code that trigger a state update,
  you wrap those codes inside act().
  act() will make sure all the states are updated to the Dom tree & the useEffect are executed, before act() is done

• if there are async function invocation inside your useEffect, calling act() is insufficient.
  you (also) need to manually add some timer to wait for the async operation, eg: waitFor / findBy after the act()

• sometimes, you dont have to use act(), you can just use eg: waitFor / findBy

• in React Testing Library, things like render and fireEvent are already wrapped in act, so dont wrap them again

reference

• • reactjs - When to use act() in jest unit tests with react-dom - Stack Overflow // @this_post @intro
    When to use act() in jest unit tests with react-dom
    

• React will process all state updates + useEffects before exiting the 'act'

  normally, try to use findBy()

  • Master React Testing with Jest and React Testing Library - YouTube // @intro @base_knowlres @imp @confirm
    https://youtu.be/NLFPvO8_hMQ?t=17749
    

• act(() => {
    /* fire events that update state */
  });
  /* assert on the output */
  

  • Understanding Act function | React Native Testing Library // @intro @imp
    https://callstack.github.io/react-native-testing-library/docs/understanding-act#act-warnings
    

  • Test Utilities – React // @intro
    https://legacy.reactjs.org/docs/test-utils.html#act
    

• • How act() works inside react? - DEV Community // @internal-bit
    https://dev.to/dmtrkovalenko/how-act-works-inside-react-3hc0
    

• what they don’t know is that render and fireEvent are already wrapped in act!

  • When should I use act() in react-testing-library? | by FlyingSquirrel | Medium // @note
    https://flyingsquirrel.medium.com/when-should-i-use-act-in-react-testing-library-d7dd22a3340e
    

• Specifically: if you wrap those things in act(() => { ... }), then instead of enqueuing microtasks, React will instead put those tasks in a special queue that act owns, and act will execute those tasks before returning.

  There are other things that are asynchronous because they depend on truly asynchronous APIs, such as the Fetch API, and there's no way for React to paper over that; so you can't just use act for those, but rather, you need to use await to wait for them to complete.

  • javascript - Why do I need waitFor or act instead of just using await in react testing? - Stack Overflow // @imp @confirm
    Why do I need waitFor or act instead of just using await in react testing?
    

• In 16.8.0, we introduced a new testing api act(...). It guarantees 2 things for any code run inside its scope:

  • any state updates will be executed
  • any enqueued effects will be executed

  • react-act-examples/sync.md at master · threepointone/react-act-examples // @confirm-bit
    https://github.com/threepointone/react-act-examples/blob/master/sync.md
    

• Asynchronous code​

  Asynchronous version of act also is executed immediately, but the callback is not yet completed because of some asynchronous operations inside.

  If we test our component in a native way without handling its asynchronous behaviour we will end up with sync act warning:

  Note that this is not yet the infamous async act warning. It only asks us to wrap our event code with act calls. However, this time our immediate state change does not originate from externally triggered events but rather forms an internal part of the component. So how can we apply act in such scenario?

  await waitFor(() => view.getByText('Count 1'));

  • Understanding Act function | React Native Testing Library @base_knowlres // @imp
    https://callstack.github.io/react-native-testing-library/docs/understanding-act#asynchronous-act
    

• ReactAct.js is the module of act(), it is a bit long, let’s try to break it down.

  1. ReactCurrentActQueue is very important, we can think of it as something similar to the task queue in Scheduler.
  2. when act(callback) is called, the callback is called here

  • How does act() work internally in React? // @internal-bit
    https://jser.dev/react/2022/05/15/how-act-works/
    

Titograd

Yeah, I have an useState set* function inside useEffect. Thanks for enlightening me! – Liturgics