Fix Test Warnings in VxAdmin #2801
Conversation
| @@ -494,7 +495,7 @@ test('printing ballots and printed ballots report', async () => { | |||
| userEvent.click(screen.getByRole('button', { name: 'Continue' })); | |||
|
|
|||
| // Printing should now continue normally | |||
| await waitFor(() => getByText('Printing')); | |||
There was a problem hiding this comment.
In this printing modal case, we simply weren't waiting for the modal to close before moving on. Not a React Query issue.
| // useQuery's in AppRoot are refetching data, and there's no change to wait on | ||
| await advanceTimersAndPromises(); |
There was a problem hiding this comment.
Unclear to me what was being fetched and why, but warnings indicated it was one of the hooks in AppRoot.
| await screen.findByText('Currently tallying live ballots.'); | ||
| // We're waiting on a query for isOfficialResults. It has a default value, | ||
| // so there is no change on the page to wait for before test ends. | ||
| // Await promises to avoid test warning. | ||
| await advanceTimersAndPromises(); |
There was a problem hiding this comment.
Case where we have a default value and there's nothing we could wait on.
| // We're waiting on a query for the file mode (live vs. test). | ||
| // It has a default value, so there is no change on the page when loaded. | ||
| // Await promises to avoid test warning. | ||
| await advanceTimersAndPromises(); |
There was a problem hiding this comment.
This can happen in the middle of a test as well, not just at the end.
| await act(async () => { | ||
| await sleep(1); | ||
| }); |
There was a problem hiding this comment.
In this case, advancePromises didn't do the trick. I actually had to sleep. Could probably do the same by using fake timers and using advanceTimersAndPromises
| await act(async () => { | ||
| await sleep(1); | ||
| }); |
There was a problem hiding this comment.
First three tests in this file all had the same problem.
adghayes
force-pushed
the
drew/admin-test-warnings
branch
from
190415c
to
49de403
Compare
yeah, that SGTM! having felt the pain of sorting through the console spam recently, i'm in favour of merging 😅 |
With the introduction of React Query, we are getting a lot test warnings about updates to unmounted components. This can make it hard to read the test output and can obscure more concerning warnings.
The cause seems to be that React Query is fetching and making state updates after tests have ended. RTL good practice would be to wait for changes on the screen before ending or continuing the test. But in some cases, there are no changes on the screen, because the data is simply refetching or it is fetching data for which we have a default value (so there is no change on screen). I'll comment to point out some of the different cases.
I don't necessarily intend to merge this PR, but I was curious to see what it took to sort out the warnings and to start a discussion around it.