Confused about whether to use act
or something else?
Jest tells me to wrap in act
:
"console.error, Warning: An update to ContactFormController inside a test was not wrapped in act(…). When testing, code that causes React state updates should be wrapped into act(…)"
IDE tells me act
is deprecated:
"The signature ‘(callback: () => void | Promise): Promise’ of ‘act’ is deprecated.ts(6387)
index.d.ts(393, 4): The declaration was marked as deprecated here."
ChatGPT tells me that React batches calls so you dont need to wrap in act:
"In React 17 and above, you typically don’t need to manually wrap your updates in act calls in your tests. Instead, React will automatically batch updates within test environments like Jest."
When I remove act
the test fails.
What should I use as an alternative to act
?
Here are the packages:
"react": "^18.2.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
Here is my test below, this works but I get the act
is deprecated warning, if I remove act
the test will fail because it did not wait for the component to re-render:
import '@testing-library/jest-dom'
import { act, render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import ContactFormController from '.'
describe('Contact Form Controller tests', () => {
it('should render loader and disable submit button on form submit', async () => {
const component = render(<ContactFormController />)
const submitBtn = component.getByTestId('contact-submit-button')
await act(async () => {
userEvent.type(component.getByLabelText(/^First Name/i), 'Captain')
userEvent.type(component.getByLabelText(/^Last Name/i), 'Bob')
userEvent.type(component.getByLabelText(/^Email/i), '[email protected]')
userEvent.type(component.getByPlaceholderText(/^Greetings/i), 'Captain Ahoy')
userEvent.click(submitBtn)
})
expect(component.getByRole('alert')).toBeInTheDocument()
expect(submitBtn).toBeDisabled()
})
})
2
Answers
I’m guessing you’re on react >= 18.3.0 and @testing-library/react <= 15.0.5.
You can try updating to
@testing-library/[email protected]
which includes a fix to useact
from eitherreact-dom/test-utils
orreact
.Additionally, you can upgrade to
[email protected]
which includes an export ofact
and install RTL’s optional peer dep of@types/[email protected]
.Now you should be able to use
act
in your tests without the deprecation warning.Upgrade
@testing-library/react": "^14.1.2,
to@testing-library/react": "^15.0.7,