test(solid-router): enhance transition test suite

[birkskyum]

Summary by CodeRabbit

• Tests
  • Enhanced end-to-end tests with step-by-step assertions covering 1, 2, and 3 interaction sequences to validate intermediate and final state updates.
  • Extended timing and polling validations to better capture transient states and added a final cleanup of polling.
  • Added descriptive comments to clarify test sections and intent.

[coderabbitai]

Walkthrough

This PR expands the existing e2e transition test to add stepwise assertions after each increment, verifying intermediate n and double values across multiple click groups while preserving final assertions and loading-transition checks.

Changes

Cohort / File(s)	Change Summary
E2E Test Enhancement e2e/solid-router/basic-file-based/tests/transition.spec.ts	Adds sequential intermediate assertions and grouped sections for 1, 2, and 3 click sequences, moves/removes an early clearInterval(pollInterval) to extend polling coverage, inserts additional short waits and 2s timeouts for async checks, and retains final loading-transition validations.

Sequence Diagram(s)

(Skipped — changes are test assertions and do not introduce new runtime control-flow between components.)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify correctness of each intermediate expected value and their ordering.
• Confirm the relocated clearInterval(pollInterval) still guarantees cleanup and doesn't leak timers.
• Validate 2s timeouts are sufficient and not flaky in CI.

Possibly related PRs

• fix(solid-router): implement navigation transitions #5691: Related change to the same transition.spec.ts and router transition behavior; overlaps on test coverage for transitions.
• test(router): add waitFor for page navigation link/optional-path-params #5741: Adds additional async waiting/assertion patterns across router tests; similar intent to increase robustness of transition tests.

Suggested labels

package: solid-router

Suggested reviewers

• brenelz

Poem

🐰
I hopped through clicks and counters bright,
I watched the doubles grow in sight,
One, two, then three — assertions sing,
Polling patience for the final spring,
A rabbit cheers the tests done right.

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'test(solid-router): enhance transition test suite' accurately describes the main change: extending an end-to-end test with more comprehensive intermediate state validations.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch test(solid-router)--enhance-transition-test-suite

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit ae98ade

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	4m 9s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	2s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-11-04 15:15:11 UTC

[pkg-pr-new]

More templates

• tanstack-router-solid-example-basic
• tanstack-router-solid-example-basic-devtools-panel
• tanstack-router-solid-example-basic-file-based
• tanstack-router-solid-example-basic-non-nested-devtools
• tanstack-router-solid-example-basic-solid-query
• tanstack-router-solid-example-basic-solid-query-file-based
• tanstack-router-solid-example-basic-ssr-streaming-file-based
• tanstack-router-solid-example-kitchen-sink-file-based
• tanstack-router-solid-example-kitchen-sink-solid-query
• tanstack-router-solid-example-kitchen-sink-solid-query-file-based
• tanstack-router-solid-example-quickstart-file-based
• tanstack-solid-start-example-bare
• tanstack-solid-start-example-basic
• tanstack-solid-start-example-basic-auth
• tanstack-solid-start-example-basic-cloudflare
• tanstack-solid-start-example-basic-netlify
• tanstack-solid-start-example-basic-nitro
• tanstack-start-example-basic-solid-query
• tanstack-solid-start-example-basic-static
• tanstack-solid-start-example-basic-supabase
• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-authenticated-routes-firebase
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-devtools-panel
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-non-nested-devtools
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-i18n-paraglide
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-esbuild-file-based
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• router-monorepo-react-query
• router-mono-simple
• router-mono-simple-lazy
• tanstack-router-react-example-scroll-restoration
• tanstack-search-validator-adapters
• tanstack-start-example-bare
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-cloudflare
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-static
• tanstack-start-bun-hosting
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-counter
• tanstack-start-i18n-paraglide
• tanstack-start-example-large
• tanstack-start-example-material-ui
• tanstack-start-streaming-data-from-server-functions
• tanstack-start-example-supabase-basic
• tanstack-start-tailwind-v4
• tanstack-start-example-trellaux
• tanstack-start-example-workos
• tanstack-router-react-example-view-transitions
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5753

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5753

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5753

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5753

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5753

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5753

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5753

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5753

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5753

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5753

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5753

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5753

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5753

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5753

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5753

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5753

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5753

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5753

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5753

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5753

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5753

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5753

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5753

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@5753

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5753

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5753

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5753

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5753

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5753

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5753

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5753

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5753

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5753

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5753

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5753

commit: ae98ade

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

e2e/solid-router/basic-file-based/tests/transition.spec.ts (1)

26-26: Optional: Use consistent timeout format.

Lines 26 and 29 use 2_000 for the timeout, while other assertions in the file use 2000. Consider using a consistent format throughout for readability.

Also applies to: 29-29

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 811df9c and f6da91d.

📒 Files selected for processing (1)

• e2e/solid-router/basic-file-based/tests/transition.spec.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

• e2e/solid-router/basic-file-based/tests/transition.spec.ts

e2e/**

📄 CodeRabbit inference engine (AGENTS.md)

Store end-to-end tests under the e2e/ directory

Files:

• e2e/solid-router/basic-file-based/tests/transition.spec.ts

🧠 Learnings (2)

📓 Common learnings

Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.

Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.

📚 Learning: 2025-10-08T08:11:47.088Z

Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.

Applied to files:

• e2e/solid-router/basic-file-based/tests/transition.spec.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Test

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

e2e/solid-router/basic-file-based/tests/transition.spec.ts (1)

26-81: Standardize timeout format for consistency.

The timeout values use inconsistent numeric formatting: 2_000 (lines 26, 29) vs 2000 (lines 35, 38, 47, 50, 56, 59, 69, 72, 78, 81). While functionally equivalent, standardizing on one format improves readability.

Apply this diff to use consistent formatting:

-  await expect(page.getByTestId('n-value')).toContainText('n: 1', {
-    timeout: 2_000,
-  })
-  await expect(page.getByTestId('double-value')).toContainText('double: 2', {
-    timeout: 2_000,
-  })
+  await expect(page.getByTestId('n-value')).toContainText('n: 1', {
+    timeout: 2000,
+  })
+  await expect(page.getByTestId('double-value')).toContainText('double: 2', {
+    timeout: 2000,
+  })

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f6da91d and ae98ade.

📒 Files selected for processing (1)

• e2e/solid-router/basic-file-based/tests/transition.spec.ts (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

• e2e/solid-router/basic-file-based/tests/transition.spec.ts

e2e/**

📄 CodeRabbit inference engine (AGENTS.md)

Store end-to-end tests under the e2e/ directory

Files:

• e2e/solid-router/basic-file-based/tests/transition.spec.ts

🧠 Learnings (1)

📓 Common learnings

Learnt from: nlynzaad
Repo: TanStack/router PR: 5402
File: packages/router-generator/tests/generator/no-formatted-route-tree/routeTree.nonnested.snapshot.ts:19-21
Timestamp: 2025-10-08T08:11:47.088Z
Learning: Test snapshot files in the router-generator tests directory (e.g., files matching the pattern `packages/router-generator/tests/generator/**/routeTree*.snapshot.ts` or `routeTree*.snapshot.js`) should not be modified or have issues flagged, as they are fixtures used to verify the generator's output and are intentionally preserved as-is.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Test

🔇 Additional comments (1)

e2e/solid-router/basic-file-based/tests/transition.spec.ts (1)

21-82: Excellent test enhancement with stepwise validation.

The expanded test now thoroughly validates transition behavior across multiple click sequences. The pattern of asserting old values → waiting → asserting new values for each section (1, 2, and 3 clicks) provides comprehensive coverage of the transition mechanism. The single clearInterval at line 84 correctly allows polling throughout the entire test duration.