test(react-query/ssr): add 'useMutation' and 'useMutationState' tests for SSR #9995
Conversation
|
π WalkthroughWalkthroughAdds SSR tests for mutation hooks and exposes Changes
Sequence Diagram(s)Estimated code review effortπ― 2 (Simple) | β±οΈ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touchesβ Failed checks (1 warning)
β Passed checks (2 passed)
β¨ Finishing touches
π§ͺ Generate unit tests (beta)
π Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro π Files selected for processing (1)
π§ Files skipped from review as they are similar to previous changes (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)
Comment |
|
View your CI Pipeline Execution β for commit 4f1763c
βοΈ Nx Cloud last updated this comment at |
sukvvon
force-pushed
the
test/react-query-ssr-mutation
branch
from
95ae247 to
633a2e4
Compare
sukvvon
force-pushed
the
test/react-query-ssr-mutation
branch
from
633a2e4 to
e72096f
Compare
![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 (1)
packages/react-query/src/__tests__/ssr.test.tsx (1)
205-219: LGTM! Test correctly verifies useMutationState SSR behavior.The test properly validates that
useMutationStatereturns an empty array during server-side rendering.Optional: Add queryCache.clear() for consistency
For consistency with other tests in this file, consider adding
queryCache.clear()at the end of both new test cases, even though mutations don't create cache entries:expect(markup).toContain('mutationState: 0') + + queryCache.clear() })Apply the same to the
useMutationtest at line 203.
π Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
π Files selected for processing (1)
packages/react-query/src/__tests__/ssr.test.tsx
π§° Additional context used
π§ Learnings (1)
π Learning: 2025-11-22T09:06:05.219Z
Learnt from: sukvvon
Repo: TanStack/query PR: 9892
File: packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx:331-335
Timestamp: 2025-11-22T09:06:05.219Z
Learning: In TanStack/query test files, when a queryFn contains side effects (e.g., setting flags for test verification), prefer async/await syntax for clarity; when there are no side effects, prefer the .then() pattern for conciseness.
Applied to files:
packages/react-query/src/__tests__/ssr.test.tsx
β° 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: Test
- GitHub Check: Preview
π Additional comments (2)
packages/react-query/src/__tests__/ssr.test.tsx (2)
10-11: LGTM!The imports are correctly added for the new mutation hook tests.
179-203: LGTM! Test correctly verifies useMutation SSR behavior.The test properly validates that
useMutationreturns the expected idle state during server-side rendering. The assertions confirm the correct initial state without triggering the mutation function.
Codecov Reportβ
All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #9995 +/- ##
===========================================
+ Coverage 45.79% 84.71% +38.92%
===========================================
Files 200 26 -174
Lines 8520 373 -8147
Branches 1975 110 -1865
===========================================
- Hits 3902 316 -3586
+ Misses 4158 48 -4110
+ Partials 460 9 -451 π New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 2
π§Ή Nitpick comments (1)
packages/react-query/src/__tests__/ssr.test.tsx (1)
212-218: Consider verifying additional mutation state properties.While checking the status is sufficient for SSR testing, you could enhance test coverage by also verifying the
isIdleandisPendingproperties explicitly, similar to how other tests verify multiple aspects of the query/mutation state.π Optional enhancement for more comprehensive coverage
function Page() { const mutation = useMutation({ mutationFn: () => sleep(10).then(() => 'data'), }) - return <div>{`status: ${mutation.status}`}</div> + return ( + <div> + {`status: ${mutation.status}, isIdle: ${mutation.isIdle}, isPending: ${mutation.isPending}`} + </div> + ) } const markup = renderToString( <QueryClientProvider client={queryClient}> <Page /> </QueryClientProvider>, ) expect(markup).toContain('status: idle') + expect(markup).toContain('isIdle: true') + expect(markup).toContain('isPending: false')
π Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
π Files selected for processing (1)
packages/react-query/src/__tests__/ssr.test.tsx
π§° Additional context used
π§ Learnings (1)
π Learning: 2025-11-22T09:06:05.219Z
Learnt from: sukvvon
Repo: TanStack/query PR: 9892
File: packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx:331-335
Timestamp: 2025-11-22T09:06:05.219Z
Learning: In TanStack/query test files, when a queryFn contains side effects (e.g., setting flags for test verification), prefer async/await syntax for clarity; when there are no side effects, prefer the .then() pattern for conciseness.
Applied to files:
packages/react-query/src/__tests__/ssr.test.tsx
β° 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: Test
- GitHub Check: Preview
π Additional comments (1)
packages/react-query/src/__tests__/ssr.test.tsx (1)
11-12: LGTM! Import additions are appropriate.The new imports for
useMutationanduseMutationStateare correctly added and consistent with the existing import pattern in the file.
1 participant
π― Changes
Add
useMutationanduseMutationStatetests for SSR inssr.test.tsx.β Checklist
pnpm run test:pr.π Release Impact
Summary by CodeRabbit
New Features
Tests
βοΈ Tip: You can customize this high-level summary in your review settings.