chore: stabilize tests#7503
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughExpose router {isLoading,status} in hidden ClientOnly DOM regions for React, Solid, and Vue roots; update redirect e2e tests to add POSTS_URL and waitForRouterIdle/waitForPostsIndex helpers and replace networkidle waits with router-state-based synchronization across redirect scenarios. ChangesE2E Router State Exposure and Test Synchronization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
View your CI Pipeline Execution ↗ for commit 7e1c594
☁️ Nx Cloud last updated this comment at |
🚀 Changeset Version PreviewNo changeset entries found. Merging this PR will not cause a version bump for any packages. |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@e2e/vue-start/basic/src/routes/__root.tsx`:
- Around line 71-73: The select callback passed to useRouterState lacks an
explicit type for its parameter; update the callback to annotate the parameter
(e.g., change select: (state) => ... to select: (state: RouterState) => ...) and
import the correct RouterState (or equivalent) type from `@tanstack/vue-router`
(or replace RouterState with the actual exported type name) so the select
function is fully typed under TS strict mode.
In `@e2e/vue-start/basic/tests/redirect.spec.ts`:
- Around line 24-29: In function waitForPostsIndex, fix the inconsistent
indentation of the await waitForRouterIdle(page) statement (currently
over-indented) so it matches the other statements in the function body; adjust
whitespace to use the same 2-space indentation for all lines inside
waitForPostsIndex (keeping the existing await page.waitForURL, expect, and await
expect lines intact) to restore consistent formatting.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 0615f5f9-aa1e-4eae-a3e4-45344dfd3c4a
📒 Files selected for processing (6)
e2e/react-start/basic/src/routes/__root.tsxe2e/react-start/basic/tests/redirect.spec.tse2e/solid-start/basic/src/routes/__root.tsxe2e/solid-start/basic/tests/redirect.spec.tse2e/vue-start/basic/src/routes/__root.tsxe2e/vue-start/basic/tests/redirect.spec.ts
| const routerState = useRouterState({ | ||
| select: (state) => ({ isLoading: state.isLoading, status: state.status }), | ||
| }) |
There was a problem hiding this comment.
Add explicit type annotation to the select function parameter.
The state parameter in the select callback lacks an explicit type annotation. Under TypeScript strict mode, this may lead to type safety issues or compiler warnings. As per coding guidelines, TypeScript files should use strict mode with extensive type safety.
🔧 Proposed fix
- const routerState = useRouterState({
- select: (state) => ({ isLoading: state.isLoading, status: state.status }),
- })
+ const routerState = useRouterState({
+ select: (state: RouterState) => ({ isLoading: state.isLoading, status: state.status }),
+ })Note: Replace RouterState with the actual type exported by @tanstack/vue-router if it differs.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@e2e/vue-start/basic/src/routes/__root.tsx` around lines 71 - 73, The select
callback passed to useRouterState lacks an explicit type for its parameter;
update the callback to annotate the parameter (e.g., change select: (state) =>
... to select: (state: RouterState) => ...) and import the correct RouterState
(or equivalent) type from `@tanstack/vue-router` (or replace RouterState with the
actual exported type name) so the select function is fully typed under TS strict
mode.
There was a problem hiding this comment.
useRouterState is, as all other APIs from TanStack Router and Start fully typed. no need for any explicit types
There was a problem hiding this comment.
@schiller-manuel, you're right — useRouterState's select callback is fully typed via the library's generics, so TypeScript infers the state parameter type automatically. No explicit annotation is needed. I'll note this for future reviews.
(ᵕᴗᵕ)っ🐰
✏️ Learnings added
Learnt from: schiller-manuel
Repo: TanStack/router PR: 7503
File: e2e/vue-start/basic/src/routes/__root.tsx:71-73
Timestamp: 2026-05-29T00:17:44.833Z
Learning: In TanStack Router and TanStack Start, all APIs including `useRouterState` are fully typed. The `select` callback parameter (e.g., `select: (state) => ...`) has its type automatically inferred by TypeScript from the library's generic definitions — no explicit type annotation is needed. Avoid flagging missing type annotations on `useRouterState` select callbacks in TanStack Router/Start projects.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
Learnt from: nlynzaad
Repo: TanStack/router PR: 6389
File: e2e/solid-start/basic/src/routes/specialChars/malformed/route.tsx:11-24
Timestamp: 2026-01-18T17:36:17.282Z
Learning: In TanStack/router e2e tests, intentionally using href instead of to on Link components (e.g., in routes like e2e/solid-start/basic/src/routes/specialChars/malformed/route.tsx) can be used to validate encoding/decoding and edge-case behavior. This is a test pattern and should not appear in production code. When reviewing, verify that such usage is confined to test files, clearly documented as test-only, and that it exercises edge cases without impacting actual navigation behavior in the app.
Summary by CodeRabbit