-
Notifications
You must be signed in to change notification settings - Fork 252
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update of the @testing-library/react version to 14.0.0 throws "act" warnings #1104
Comments
What happens if you wrap the timer advancement in +await act(() => {
await new Promise((resolve) => {
setTimeout(resolve, 300);
});
+}); |
This comment was marked as spam.
This comment was marked as spam.
If you're facing the same issue, please just upvote the issue or, if you want to contribute, provide a minimal, cloneable reproduction. "+1" comments are not helpful and create unnecessary notifications for everybody subscribed to this issue. |
I have the same issue, wrapping |
That was the attempt to replicate the problem I have, which goes beyond that. I have problems with all the tests that are many files with unit and integration tests that have problems due to the latest version of the library, as detailed at the beginning. When I downgrade the version of the library in the package.json(), to the previous one, the problems with act() no longer appear. |
I can't find these details. All I see is the reproduction which should be fixed by wrapping the state update in act() as explained by the warning. Unless you're saying my diff doesn't fix the issue in the repro? |
The issue we're running into is that now every test in our suite is throwing this error after upgrading when it wasn't before. Is it expected that we have to wrap every state update in |
This was probably a bug that you didn't get those. If you import from Though in this specific case I encourage you to keep them enabled since you're clearly missing to wrap state updates in act. If you have other repros where you think every state update is wrapped in act but still get warnings, please share them. |
TLDR; I have a repro where I believe every state update is wrapped in act, but still get warnings. I've been updating my tests to account for places where I previously needed to wrap things in There were a number places where my tests would call I've gotten almost all my act warnings to go away by stepping through my code and tracing the state updates back to something like that. Except for a very few remaining warnings, which are all pretty similar. I've finally found a working somewhat simplified repro (ignore the repo name). There is one test in I can't for the life of me figure out how to avoid this act warning. As far as I can tell, the thing which triggers the state update (the timer advancing) is already wrapped in an Not sure if it's a bug, or I'm just doing something wrong. |
+1, but I'll add: I'm not just getting warnings, my tests are now failing after the upgrade. So it's not just the verbosity of the warnings that are the problem, it's the changed behavior. I also noticed that I'm seeing these act warnings on updates I do via I do like how testing-library takes care of wrapping its own calls in act in all the obvious places. I don't think expecting callers to wrap all their calls in |
(None of this true, ignore) |
I've updated the library to version 14.0.0 to fix some act warnings that were being thrown and I'm glad to report that the new release has indeed fixed them. One shouldn't need to wrap I'd start with a simple test case and see if you are following all the requirements since recently there was a recent addition of I could also be wrong and there might be a bug, but wanted to say that it's working as expected for me without any "missing act" being logged. It's important to see a reproducible scenario where this is happening as otherwise it's possible you are missing something on your tests setup. |
Thanks for confirming this is not expected. I finally managed to fix the issue on my project by deleting my |
@bpinto, see my comment for a repro of (as far as i can tell), an un-fixable act warning. |
base on this best pratices: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library I had my custom render setup https://testing-library.com/docs/react-testing-library/setup/#custom-render.. after I added // jest.setup.ts
import { cleanup } from '@testing-library/react'
afterEach(() => {
cleanup
}) |
I think I managed to extract the issue into reproducible test https://github.com/artursvonda/rtl-14-act-repro. Let me know if this helps. As you see in the test, I'm not doing anything funky. |
@artursvonda Thank you very much for the repro. It seems to work fine with using The first step would be to come up with a repro without any /cc @ph-fritsche |
I see different issues being mixed up here.
|
Indeed, for my case the issue seems like was with multiple |
@eps1lon, I updated my repro to use I will add a couple comments to the test file to explain some of what is happening. https://codesandbox.io/s/compassionate-marco-nekmti?file=/__tests__/MyModule.test.tsx |
@thepuzzlemaster Your issue is explained in the blog post linked above. onInitiate().then((result) => { // This delays for at least one microtask...
setId(result); // ...and then updates state. await act(() => {
jest.advanceTimersByTime(1000)
return Promise.resolve() // This hides the issue in the codesandbox environment.
// Might need any other number of microtasks in another environment though, so don't do this.
// .then(() => void 0)
// .then(() => void 0)
}) |
@ph-fritsche thanks for the added context. I read through that blog post, and this thread was also fairly helpful. I can see how the nested And as you suggest, changing my code to this: I wasn't entirely sure if your comments meant this was the right thing to do, or should be avoided? And when you say I guess the thing I'm still not entirely clear on, is should I be adjusting my product code to make this more testable? Or is the approach here of adding a promise resolution inside my act() call the appropriate way to address this warning? Based on my (potentially incorrect) understanding, making my act an In your blog post, you fix the issue by adding |
Just returning any promise is just masking the issue. It works with pushing it to the next microtask here, but it might fail when you run the same test in a slightly different environment. There you might need to await any other number of additional microtasks, which makes this a randomly working workaround™. The correct way to fix with is to create a promise that resolves when the state update is applied. await waitFor(() => expect(screen.getByRole('checkbox')).toBeChecked(), {
timeout: 10000, // Allow the callback to run ten times
interval: 1000, // Increase the interval
}) |
I think @ph-fritsche hit the nail on the head here 🚀 I experienced lots of erroneous "@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3", I'm assuming this is due to "node_modules/@testing-library/react": {
"version": "14.0.0",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.0.0.tgz",
"integrity": "sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.5",
"@testing-library/dom": "^9.0.0",
"@types/react-dom": "^18.0.0"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/@testing-library/user-event": {
"version": "14.4.3",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=12",
"npm": ">=6"
},
"peerDependencies": {
"@testing-library/dom": ">=7.21.4"
}
} Overriding "overrides": {
"@testing-library/dom": "^9.0.1"
} Thanks for the awesome library. Hopefully this helps someone else. |
Thanks. I experienced the same. It was caused by eslint-plugin-jest-dom which is still using version 8. For yarn I needed to add a resolution to fix it |
For more info, see: testing-library/user-event#1104
I think this may not be resolved for User Event. // Temporary workaround for testing library's act() not working with userEvent
export async function actWrappedUserEvent(event: Promise<void>): Promise<void> {
return await act(async () => {
await event;
});
}
await actWrappedUserEvent(user.click(submitButton)); the error isnt causing any tests to fail but the only way ive keep the error from bubbling up is to wrap it in an act |
I suddenly started getting this issue in a previously clean project. I'm using Yarn v3 PnP with node_modules on disk. A clue was my CI server was not showing these warnings. In the end I had to do: $ rm -rf node_modules yarn.lock
$ yarn install And now my tests are working without warnings again. So I can only assume that even though Yarn thought it had cleaned everything up I still had conflicting versions on disk being referenced. |
This worked for me, we are using yarn and we had to add resolutions instead of overrides. Thank you @louis-young "resolutions": {
"postcss": "^8.3.6",
"@testing-library/dom": "^9.0.1"
} |
multilple out-of-date transitiive dependency upon testing-library/dom leads to errors with user-event. see testing-library/user-event#1104 (comment)
@testing-library/react
version: 14.0.0Relevant code or config:
What you did:
I upgraded the version of @testing-library/react from 13.4.0 to 14.0.0. And I started having problems in all the tests of my application. Before this update this did not happen.
What happened:
I'm getting more act warnings now with @testing-library@14.0.0.
![Captura de Pantalla 2023-02-20 a la(s) 18 29 41](https://user-images.githubusercontent.com/51271219/220201728-34c1147f-2ef5-4fd6-83ef-81a814fd3ed9.png)
![Captura de Pantalla 2023-02-20 a la(s) 18 29 13](https://user-images.githubusercontent.com/51271219/220201738-430adcc5-6be1-4abc-91fa-9a1587487ec9.png)
Tested with await waitFor, and still throwing act warnings with userEvent that triggers a state change.
Reproduction:
You can fork to reproduce the issue:
here: https://codesandbox.io/s/act-warning-wait-for-react-18-forked-6jurf2
Problem description:
The state update (setState()) seems to make the test library think that act is incomplete, even though it is. This happens for every unit test where an event is fired, such as userEvent.click() or userEvent.upload().
The text was updated successfully, but these errors were encountered: