test(react-router): throw redirect during preload #4976
Conversation
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
WalkthroughAdds a test verifying that a route that throws Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant App as App/Router
participant Route as Protected.beforeLoad
participant Auth as AuthState
participant Redirect as redirect()
User->>App: Focus link to /protected (preload intent)
App->>Route: beforeLoad (preload)
Route->>Auth: Check signedIn -> false
Route->>Redirect: throw redirect('/login')
App-->>User: Preload handled (no navigation)
User->>Auth: Sign in (true)
User->>App: Navigate to /protected
App->>Route: beforeLoad (navigation)
Route->>Auth: Check signedIn -> true
Route-->>App: Continue (afterRedirectMock invoked)
App-->>User: Show Protected (/protected)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
⏰ 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). (2)
🔇 Additional comments (2)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
View your CI Pipeline Execution ↗ for commit 8a18a9f
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-plugin
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-plugin
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-server-functions-client
@tanstack/start-server-functions-fetcher
@tanstack/start-server-functions-server
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/react-router/tests/redirect.test.tsx (3)
243-246: Replace time-based sleep with deterministic waitFor on the preload side-effectSleeping introduces unnecessary flakiness and test latency. Since the preload effect is observable via
beforeRedirectMock, wait on that instead.Apply this diff within the current test:
- // preload - fireEvent.focus(linkToProtected) - await sleep(WAIT_TIME) + // preload + fireEvent.focus(linkToProtected) + await waitFor(() => expect(beforeRedirectMock).toHaveBeenCalledTimes(1))And update the import at the top of the file to include waitFor (outside the changed hunk):
import { cleanup, configure, fireEvent, render, screen, waitFor, } from '@testing-library/react'
243-249: Optionally assert no navigation happens during preload to document current semanticsIf you want to explicitly document that a redirect thrown during intent-preload does not navigate (only evicts cache), you can assert location remains at “/” after the preload step. Keep in mind this is locking in current behavior; if this is intentionally unspecified, skipping is fine.
Example assertions (insert right after the preload wait):
expect(router.state.location.href).toBe('/') expect(window.location.pathname).toBe('/') expect(afterRedirectMock).not.toHaveBeenCalled()
257-258: Consider adding phase-specific assertions for clearer failure signalsYou already assert final call counts. Adding interim checks (after preload and right after click) can make failures easier to diagnose if behavior regresses (e.g., preload called twice or navigation bypasses the guard).
For example:
- After preload wait:
expect(beforeRedirectMock).toHaveBeenCalledTimes(1)- Immediately after click:
expect(beforeRedirectMock).toHaveBeenCalledTimes(2)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/react-router/tests/redirect.test.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/react-router/tests/redirect.test.tsx (3)
e2e/react-router/basic-file-based/src/routeTree.gen.ts (1)
routeTree(1041-1043)packages/react-router/src/router.ts (1)
createRouter(80-82)packages/react-router/src/RouterProvider.tsx (1)
RouterProvider(47-56)
⏰ 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). (2)
- GitHub Check: Preview
- GitHub Check: Test
🔇 Additional comments (1)
packages/react-router/tests/redirect.test.tsx (1)
215-221: Good encapsulation of the preload-redirect guard; assertions are well-instrumentedUsing a closure-based
signedInflag withbeforeRedirectMock/afterRedirectMockcleanly captures the eviction behavior and ensures the guard re-executes on real navigation. Looks good.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Add a test to validate the following behavior: a redirect throw suring preload evicts the match from the cache before actual load.
I'm not 100% sure this is the behavior we want, but this is the current behavior.
The actual goal is to figure out what the
onUpdatecallback on the__storeis used for. I would like to remove it because this seems pretty heavy.Summary by CodeRabbit