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

reactjs unit-testing jestjs react-dom
evolon picture evolon · Feb 7, 2020 · Viewed 8.2k times · Source

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?

Answer

slideshowp2 picture slideshowp2 · Feb 11, 2020

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

Related questions

How to mock an exported const in jest

I have a file that relies on an exported const variable. This variable is set to true but if ever needed can be set to false manually to prevent some behavior if downstream services request it. I am not sure …

Read More
Using Jest to mock a React component with props

I have a React component which contains some other components that depend on access to a Redux store etc., which cause issues when doing a full Enzyme mount. Let's say a structure like this: import ComponentToMock from './ComponentToMock'; <…

Read More
Jest mock react context

I need some help understanding how one can test an application using React Context. Here's my sample setup. context.js import React from 'react' export const AppContext = React.createContext() App.js import React from 'react' import MyComponent from './MyComponent' …

Read More