test(react-router): Fix flaky E2E tests#20630
Merged
Conversation
Contributor
size-limit report 📦
|
What was going wrong Issue #20532 is about a flaky Playwright test: should send pageload transaction in the react-router-7-framework-spa app. That app uses client-only hydration (hydrateRoot + HydratedRouter). The pageload transaction and React Router’s instrumentHydratedRouter updates (route name, sentry.origin, etc.) can land in a race with page.goto finishing: sometimes CI loses that race, so the test times out or assertions fail. This matches how other E2E apps avoid the same class of bug—for example the SvelteKit helpers wait for hydration / UI together with the pageload transaction so routing and tracing line up. What we changed After each page.goto for the performance routes, the tests now wait for the route’s <h1> before awaiting waitForTransaction: /performance → Performance Page /performance/with/sentry → Dynamic Parameter Page So the HydratedRouter has rendered the matched route before the test blocks on the envelope, which stabilizes timing relative to router instrumentation.
mydea
force-pushed
the
fn/fix-flaky-react-router-test
branch
from
522d9a9 to
5e98474
Compare
47 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #20532
This hopefully makes react-router framework E2E tests a bit less flaky.
AI Summary of the problem
That app uses client-only hydration (hydrateRoot + HydratedRouter). The pageload transaction and React Router’s instrumentHydratedRouter updates can land in a race with page.goto finishing: sometimes CI loses that race, so the test times out or assertions fail.
This matches how other E2E apps avoid the same class of bug—for example the SvelteKit helpers wait for hydration / UI together with the pageload transaction so routing and tracing line up.
What we changed
After each page.goto for the performance routes, the tests now wait for the route’s <h1> before awaiting waitForTransaction:
/performance → Performance Page
/performance/with/sentry → Dynamic Parameter Page
So the HydratedRouter has rendered the matched route before the test blocks on the envelope, which stabilizes timing relative to router instrumentation.