test(react-query/ssr): add 'useMutation' and 'useMutationState' tests for SSR #9995
Conversation
|
📝 WalkthroughWalkthroughAdds two server-side rendering tests that render components using Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 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 3e69170
☁️ 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.84% 85.18% +39.34%
===========================================
Files 200 26 -174
Lines 8525 378 -8147
Branches 1968 111 -1857
===========================================
- Hits 3908 322 -3586
+ Misses 4157 47 -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.
…'useMutationState' tests
# Conflicts: # packages/react-query/src/__tests__/ssr.test.tsx
1 participant
🎯 Changes
Add
useMutationanduseMutationStatetests for SSR inssr.test.tsx.✅ Checklist
pnpm run test:pr.🚀 Release Impact
Summary by CodeRabbit
Tests
Chores
✏️ Tip: You can customize this high-level summary in your review settings.