test: Resolve warnings and errors in Jest tests #9784
Conversation
jdamore-linode
requested review from
coliu-akamai and
tyler-akamai
and removed request for
a team
There was a problem hiding this comment.
A toast notification appears when an attempt by the user to download their kubeconfig fails for any reason. This failure always occurs from within this Jest test since we're not mocking the download request, and we can't make real Linode API requests via Jest.
Since the app attempts to show a toast notification, Jest logs an error because Notistack is not actually set up and available from within the context of the Jest test. This change resolves the Jest error by mocking Notistack's useSnackbar export. However, it may be a better solution to mock the HTTP request to prevent the toast notification in the first place.
| Before | After |
|---|---|
 |
 |
There was a problem hiding this comment.
The AddonsPanel component makes a bunch of requests to fetch Images, but the requests aren't being mocked by MSW. This causes Jest to log ECONNREFUSED errors for each failed HTTP request, as well as warnings from MSW relating to the unhandled requests. The fix here is to mock those GET requests to the Image endpoints.
| Before | After |
|---|---|
 |
|
 |
 |
There was a problem hiding this comment.
Even though testRow is async, it indirectly calls act() which cannot be executed concurrently. This change fixes the problem by awaiting each call to testRow() to ensure that act() calls do not overlap.
| Before | After |
|---|---|
 |
 |
There was a problem hiding this comment.
In this case, the errors logged by Jest are expected since we're deliberately testing an error condition. This change suppresses these errors to reduce log noise.
| Before | After |
|---|---|
 |
 |
There was a problem hiding this comment.
Similar to BucketLanding.test.tsx, we're testing an error condition so the Jest error is expected, and we can safely suppress it to reduce log noise. However, there is also a Formik warning being logged; I think resolving that will require a change in the form itself.
| Before | After |
|---|---|
 |
 |
There was a problem hiding this comment.
Similar to AddonsPanel.test.tsx, this component makes requests to fetch Linode types; these are unhandled by the test, which causes ECONNREFUSED errors and MSW warnings to be logged. Mocking the requests resolves them.
| Before | After |
|---|---|
   |
 |
There was a problem hiding this comment.
We're getting a DOM validation error here because we're not wrapping the plan selection table rows in a table. Using the wrapWithTableBody helper resolves the errors. This is a rare case where the DOM validation error is caused by the test; other DOM validation errors that get logged by React are actual issues with our component markup.
| Before | After |
|---|---|
 |
 |
jdamore-linode
added
Add'tl Approval Needed
coliu-akamai
added
Approved
|
Confirmed the tests now pass, great job!
also thank you for the self review! |
* Clean up warnings by mocking API requests * Fix longview test overlapping act() warnings * Fix PlanSelection test warning by wrapping table row components in a table body * Mock snackbar hook to resolve warning about updating state on unmounted component * Suppress React Query errors in tests where errors are expected * Added changeset: Clean up Jest warnings and errors
Description 📝
This PR aims to clean up our Jest tests a bit by resolving some of the errors and warnings that get logged to the console when running Jest. Specifically, this aims to fix issues within the tests themselves -- warnings and errors that need to be solved by modifying the source files themselves are out of scope here.
I plan to circle back tomorrow with a self review and comparison showing how the changes impact the Jest output.
How to test 🧪
We can rely on GitHub Actions for this, but you can also run the tests locally:
yarn test