Skip to content
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

test: Improve unit test stability when running locally #10278

Merged
merged 14 commits into from
Jun 5, 2024

Conversation

jdamore-linode
Copy link
Contributor

Description 📝

When running tests locally on develop, I'm getting anywhere between 3-8 failures each run. We additionally had a flaky unit test in CI during our last release which required a few re-runs to unblock the fire chief. This PR aims to address these failures and clean up a few warning messages.

Many of the failures are mitigated by increasing test timeouts -- I investigated the failures and the corresponding components and found that the tests and components were behaving exactly as expected, but when running alongside the rest of the test suite, the tests' performance drops dramatically (e.g. from 1-2s to 7-8s, or more). Going to post some more details as comments to this PR.

Changes 🔄

  • Upgrade Vitest from 1.2.x to 1.3.x.
  • Increase test timeouts for flaky tests in CreateCertificateDrawer.test.tsx, CreateAPITokenDrawer.test.tsx, and ImageAndPassword.test.tsx
  • Remove calls to act() tests to resolve some failures and warnings
    • In most cases, we were using React Testing Library functions that call act() inside of our own act() statements which triggered the issues (userEvent.*, findBy*, etc.)

Target release date 🗓️

It'd be great to get this in by the next release just to reduce any risk of a unit test failure hindering the release process, but aside from that there's really no urgency here.

How to test 🧪

This is tricky because most of these failures 1) only occur when running locally, 2) only occur when running the entire test suite (or some substantial portion of the test suite), and 3) seem to be performance related and therefore may vary from machine-to-machine.

The best way to confirm whether things are stable is to run the test suite locally:

yarn && yarn test

As an Author I have considered 🤔

Check all that apply

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@jdamore-linode jdamore-linode self-assigned this Mar 13, 2024
@jdamore-linode jdamore-linode requested a review from a team as a code owner March 13, 2024 16:22
@jdamore-linode jdamore-linode requested review from carrillo-erik and jaalah-akamai and removed request for a team March 13, 2024 16:22
@jdamore-linode
Copy link
Contributor Author

@hana-linode I added you as a reviewer because you're the only developer I'm aware of who has reproduced these failures so it would be really helpful if you could test these changes, but there's absolutely no rush/if you're busy and you don't get a chance that's totally fine too. Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolves these warnings:
billing-summary test

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolves:
Screenshot 2024-03-13 at 12 28 58 PM

We're calling userEvent.type and userEvent.click inside of act which triggers the warning since these functions call act themselves.

Comment on lines +110 to +113
it('should have an Add Client button', async () => {
const { findByText } = renderWithTheme(<LongviewLanding {...props} />);
const addButton = await findByText('Add Client');
expect(addButton).toBeInTheDocument();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This occasionally fails because queryByText('Add Client') returns null and the expect fails. I'm not sure why it fails to find the button (I don't see any logic that would delay the button being rendered), but using findByText allows the test to wait for it to appear.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I spent the most time troubleshooting this test and found that it fails by timing out nearly every time when running alongside the rest of the test suite.

(The quickest way to reproduce I've found is to run yarn test src/features/PlacementGroups src/features/Profile, but this may vary from machine-to-machine).

What I've found is that the test, interactions, etc. all work exactly as expected, but when running alongside other tests some of the interactions (specifically and surprisingly the userEvent.click(submit)) take a really long time to execute. I don't think it has anything to do with the component itself.

My (purely speculative) guess is that when transpiling/running a lot of tests concurrently, the CPU is taking such a hit that it's slowing down JSDom to the point that the tests are timing out. I opened a ticket to reassess Happy DOM which might prove or disprove this theory, but in the meantime increasing the timeout seems to be a reliable (if unfortunate) mitigation.

Copy link

github-actions bot commented Mar 13, 2024

Coverage Report:
Base Coverage: 82.3%
Current Coverage: 82.29%

Copy link
Member

@bnussman-akamai bnussman-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look great! Thanks for taking this on.

Looks good pending we figure out the lockfile versions

yarn.lock Outdated
@@ -13621,7 +13688,7 @@ vite@^5.0.0, vite@^5.0.12:
optionalDependencies:
fsevents "~2.3.3"

vitest@^1.0.1, vitest@^1.2.0:
vitest@^1.0.1:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder why vitest is showing up twice in our lockfile.

Do we need to bump the vitest version in api-v4 to resolve this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bnussman-akamai That's exactly it, thanks for the catch!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good now!

@bnussman-akamai
Copy link
Member

I think I just got some flake on src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerSummary/EditLoadBalancerConfigurations/EditRoutes/EditRouteDrawer.test.tsx. Maybe it needs some timeout 😞

https://github.com/linode/manager/actions/runs/8282874790/job/22664807267

@jdamore-linode
Copy link
Contributor Author

jdamore-linode commented Mar 14, 2024

I think I just got some flake on src/features/LoadBalancers/LoadBalancerCreate/LoadBalancerSummary/EditLoadBalancerConfigurations/EditRoutes/EditRouteDrawer.test.tsx. Maybe it needs some timeout 😞

https://github.com/linode/manager/actions/runs/8282874790/job/22664807267

@bnussman-akamai I have seen this one too! I spent a little time troubleshooting it, but couldn't reproduce it consistently enough to make any progress. Iirc its failure message indicated something other than a timeout, like an event not firing or something like that, but there wasn't a ton to go on!

If I have some time before this gets more approvals I'll try to take a second look, but if not I'll open a new ticket to investigate further so this doesn't slip through the cracks!

Copy link
Contributor

@hana-akamai hana-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm still seeing some flaky tests but this is still an improvement 🧹
image

@jdamore-linode
Copy link
Contributor Author

I'm still seeing some flaky tests but this is still an improvement 🧹 (Results screenshot)

Thanks @hana-linode, I'll check these out Monday morning -- the one test there timed out even though we increased the timeout to 10 seconds! Wonder if we need to increase it even more...

@carrillo-erik
Copy link
Contributor

@jdamore-linode Awesome work! This should help alleviate some of the issues and improve developer experience.
Looks like you've got some merge conflicts to resolve.

@jaalah-akamai jaalah-akamai added the Approved Multiple approvals and ready to merge! label May 30, 2024
@jdamore-linode jdamore-linode merged commit c2544d1 into linode:develop Jun 5, 2024
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge! Ready for Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants