fix(devtools ui): fix json tree nan values#430
Merged
Merged
Conversation
📝 WalkthroughWalkthroughA NaN rendering bug in JsonTree is fixed by explicitly stringifying numeric values. A new comprehensive test suite validates rendering across all data types and configurations. Vitest test discovery is configured, and the fix is documented in a changeset for patch release. ChangesJsonTree NaN Rendering Fix and Test Coverage
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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. Comment |
Contributor
🚀 Changeset Version Preview3 package(s) bumped directly, 10 bumped as dependents. 🟩 Patch bumps
|
|
View your CI Pipeline Execution ↗ for commit a52fbd7
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/angular-devtools
@tanstack/devtools
@tanstack/devtools-a11y
@tanstack/devtools-client
@tanstack/devtools-ui
@tanstack/devtools-utils
@tanstack/devtools-vite
@tanstack/devtools-event-bus
@tanstack/devtools-event-client
@tanstack/preact-devtools
@tanstack/react-devtools
@tanstack/solid-devtools
@tanstack/vue-devtools
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/devtools-ui/tests/tree.tsx (1)
58-78: ⚡ Quick winConsider adding tests for Infinity edge cases.
While the current numeric tests are solid, consider adding coverage for
Infinityand-Infinityto ensure theString()conversion handles all special numeric values consistently.📝 Optional additional test cases
it('renders NaN as "NaN"', () => { const el = renderTree(NaN) expect(el.textContent).toContain('NaN') }) + + it('renders Infinity as "Infinity"', () => { + const el = renderTree(Infinity) + expect(el.textContent).toContain('Infinity') + }) + + it('renders -Infinity as "-Infinity"', () => { + const el = renderTree(-Infinity) + expect(el.textContent).toContain('-Infinity') + }) })🤖 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 `@packages/devtools-ui/tests/tree.tsx` around lines 58 - 78, Add test cases for the Infinity edge cases inside the existing describe('number') block: call renderTree(Infinity) and renderTree(-Infinity) and assert their rendered textContent contains 'Infinity' and '-Infinity' respectively (matching how other tests use expect(el.textContent).toContain(...)); update the tests in packages/devtools-ui/tests/tree.tsx near the existing renderTree calls so Number special values are covered consistently.
🤖 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.
Nitpick comments:
In `@packages/devtools-ui/tests/tree.tsx`:
- Around line 58-78: Add test cases for the Infinity edge cases inside the
existing describe('number') block: call renderTree(Infinity) and
renderTree(-Infinity) and assert their rendered textContent contains 'Infinity'
and '-Infinity' respectively (matching how other tests use
expect(el.textContent).toContain(...)); update the tests in
packages/devtools-ui/tests/tree.tsx near the existing renderTree calls so Number
special values are covered consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a30944eb-075e-4b20-aa4f-19d0cae05a80
📒 Files selected for processing (4)
.changeset/fix-nan-tree-rendering.mdpackages/devtools-ui/src/components/tree.tsxpackages/devtools-ui/tests/tree.tsxpackages/devtools-ui/vite.config.ts
AlemTuzlak
approved these changes
May 11, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary by CodeRabbit
Bug Fixes
JsonTreerendering to correctly displayNaNvalues instead of converting them tonull.Tests
JsonTreecomponent covering various data types, expansion behavior, and formatting options.