Replace internal helpers with @recharts/devtools import#6766
Conversation
WalkthroughThis PR extracts internal testing utilities (random number generator, bounded value function, and mock data generator) into a separate Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10–15 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
www/src/components/CodeEditorWithPreview.tsx (1)
1-52: Remove@recharts/devtoolsimport or verify it exists as a monorepo workspace.
The package@recharts/devtoolsdoes not exist on npm. If this is an internal monorepo workspace, ensure it's properly resolved in the build configuration. If it's meant for future use, remove it until the package is published or properly available. The current code will fail at runtime when the Runner attempts to execute user code.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (12)
package.json(1 hunks)storybook/stories/Examples/Tooltip.stories.tsx(1 hunks)test/chart/LineChart.spec.tsx(1 hunks)test/helper/generateMockData.ts(0 hunks)test/helper/random.spec.ts(0 hunks)test/helper/random.ts(0 hunks)test/polar/Pie.spec.tsx(1 hunks)test/state/selectors/axisSelectors.spec.tsx(1 hunks)test/state/selectors/selectDisplayedData.spec.tsx(1 hunks)www/src/components/CodeEditorWithPreview.tsx(2 hunks)www/src/components/Shared/StackBlitzLink.tsx(1 hunks)www/src/docs/exampleComponents/ScatterChart/ScatterChartPerformance.tsx(1 hunks)
💤 Files with no reviewable changes (3)
- test/helper/random.spec.ts
- test/helper/random.ts
- test/helper/generateMockData.ts
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
**/*.{ts,tsx}: Never useanytype (implicit or explicit) in TypeScript code
Preferunknownoveranyand refine the type in TypeScript
Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Do not useastype assertions in TypeScript; the only exception isas const
Files:
www/src/components/Shared/StackBlitzLink.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxwww/src/components/CodeEditorWithPreview.tsxwww/src/docs/exampleComponents/ScatterChart/ScatterChartPerformance.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsxstorybook/stories/Examples/Tooltip.stories.tsx
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
www/src/components/Shared/StackBlitzLink.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxwww/src/components/CodeEditorWithPreview.tsxwww/src/docs/exampleComponents/ScatterChart/ScatterChartPerformance.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsxstorybook/stories/Examples/Tooltip.stories.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
All imports from
rechartsmust use the public API entry point; imports from internal paths likerecharts/types/*orrecharts/src/*are not allowed
Files:
www/src/components/Shared/StackBlitzLink.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxwww/src/components/CodeEditorWithPreview.tsxwww/src/docs/exampleComponents/ScatterChart/ScatterChartPerformance.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsxstorybook/stories/Examples/Tooltip.stories.tsx
test/**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Aim for 100% unit test code coverage when writing new code
Files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsx
test/**/*.{test,spec}.{ts,tsx}
📄 CodeRabbit inference engine (test/README.md)
test/**/*.{test,spec}.{ts,tsx}: Aim for 100% unit test code coverage when writing new code
Prefer to use thecreateSelectorTestCasehelper function when writing or modifying tests
Use theexpectLastCalledWithhelper function instead ofexpect(spy).toHaveBeenLastCalledWith(...)for better typing and autocompletion
Verify the number of selector calls using the spy object fromcreateSelectorTestCaseto spot unnecessary re-renders and improve performance
MockgetBoundingClientRectin tests using the helper function provided intest/helper/MockGetBoundingClientRect.ts
Usevi.useFakeTimers()in all tests due to Redux autoBatchEnhancer dependency on timers andrequestAnimationFrame
Callvi.runOnlyPendingTimers()to advance timers after renders when not usingcreateSelectorTestCasehelper, and avoidvi.runAllTimers()to prevent infinite loops
UseuserEvent.setup({ advanceTimers: vi.runOnlyPendingTimers })or theuserEventSetuphelper function fromtest/helper/userEventSetup.tswhen creating userEvent instances
When testing tooltips on hover, usevi.runOnlyPendingTimers()after eachuserEvent.hover()call or use theshowTooltiphelper function fromtooltipTestHelpers.tsto account for requestAnimationFrame delays
Files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsx
**/*.spec.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
When running unit tests, prefer to run a single test file using
npm run test -- path/to/TestFile.spec.tsxrather than running all tests withnpm test
Files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsx
storybook/stories/**/*.stories.tsx
📄 CodeRabbit inference engine (CONTRIBUTING.md)
storybook/stories/**/*.stories.tsx: Use Storybook for smoke tests and add play functions with assertions for actual tests
Update Storybook stories when APIs have been changed to ensure they work as expected
Files:
storybook/stories/Examples/Tooltip.stories.tsx
**/storybook/**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
When adding new Storybook stories, prioritize high fidelity examples intended for publication on the website and in Storybook UI; use unit tests or VR tests for low fidelity tests
Files:
storybook/stories/Examples/Tooltip.stories.tsx
🧠 Learnings (15)
📓 Common learnings
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-06T03:36:59.377Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : All imports from `recharts` must use the public API entry point; imports from internal paths like `recharts/types/*` or `recharts/src/*` are not allowed
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Extract pure helper functions for data processing and write unit tests for them
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use `vi.useFakeTimers()` in all tests due to Redux autoBatchEnhancer dependency on timers and `requestAnimationFrame`
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Mock `getBoundingClientRect` in tests using the helper function provided in `test/helper/MockGetBoundingClientRect.ts`
📚 Learning: 2025-12-06T03:36:59.377Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-06T03:36:59.377Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : All imports from `recharts` must use the public API entry point; imports from internal paths like `recharts/types/*` or `recharts/src/*` are not allowed
Applied to files:
www/src/components/Shared/StackBlitzLink.tsxpackage.jsontest/polar/Pie.spec.tsxwww/src/components/CodeEditorWithPreview.tsxwww/src/docs/exampleComponents/ScatterChart/ScatterChartPerformance.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsxstorybook/stories/Examples/Tooltip.stories.tsx
📚 Learning: 2025-11-19T14:08:01.728Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6659
File: www/src/components/GuideView/Performance/index.tsx:232-250
Timestamp: 2025-11-19T14:08:01.728Z
Learning: In Recharts version 3.4.2, object-as-prop optimizations were introduced to reduce unnecessary re-renders when new object references are passed as props. This affects the recommendation for the `react-perf/jsx-no-new-object-as-prop` ESLint rule.
Applied to files:
www/src/components/Shared/StackBlitzLink.tsxpackage.jsonwww/src/docs/exampleComponents/ScatterChart/ScatterChartPerformance.tsx
📚 Learning: 2025-11-25T01:22:59.729Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to storybook/stories/**/*.stories.tsx : Update Storybook stories when APIs have been changed to ensure they work as expected
Applied to files:
www/src/components/Shared/StackBlitzLink.tsxtest/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsxstorybook/stories/Examples/Tooltip.stories.tsx
📚 Learning: 2025-11-23T13:30:10.395Z
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6669
File: www/src/docs/exampleComponents/ScatterChart/ScatterChartWithLabels.tsx:2-2
Timestamp: 2025-11-23T13:30:10.395Z
Learning: The `TooltipIndex` type from recharts is defined in `src/state/tooltipSlice.ts` but is not currently exported from the public API entry points. It should not be imported from `recharts/types/state/tooltipSlice` as this is an internal implementation path. An ESLint rule is needed to prevent regressions.
Applied to files:
www/src/components/Shared/StackBlitzLink.tsxpackage.jsontest/polar/Pie.spec.tsxwww/src/components/CodeEditorWithPreview.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsxstorybook/stories/Examples/Tooltip.stories.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Verify the number of selector calls using the spy object from `createSelectorTestCase` to spot unnecessary re-renders and improve performance
Applied to files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Prefer to use the `createSelectorTestCase` helper function when writing or modifying tests
Applied to files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Mock `getBoundingClientRect` in tests using the helper function provided in `test/helper/MockGetBoundingClientRect.ts`
Applied to files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsxstorybook/stories/Examples/Tooltip.stories.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use `vi.useFakeTimers()` in all tests due to Redux autoBatchEnhancer dependency on timers and `requestAnimationFrame`
Applied to files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use the `expectLastCalledWith` helper function instead of `expect(spy).toHaveBeenLastCalledWith(...)` for better typing and autocompletion
Applied to files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Call `vi.runOnlyPendingTimers()` to advance timers after renders when not using `createSelectorTestCase` helper, and avoid `vi.runAllTimers()` to prevent infinite loops
Applied to files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsx
📚 Learning: 2025-11-25T01:22:59.729Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to test/component/**/*.spec.tsx : Use React Testing Library for testing component interactions and behavior upon rendering
Applied to files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxwww/src/components/CodeEditorWithPreview.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsx
📚 Learning: 2025-11-25T01:22:59.729Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.729Z
Learning: Applies to storybook/stories/**/*.stories.tsx : Use Storybook for smoke tests and add play functions with assertions for actual tests
Applied to files:
test/state/selectors/axisSelectors.spec.tsxtest/polar/Pie.spec.tsxtest/state/selectors/selectDisplayedData.spec.tsxtest/chart/LineChart.spec.tsxstorybook/stories/Examples/Tooltip.stories.tsx
📚 Learning: 2025-11-25T01:23:08.250Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.250Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : When testing tooltips on hover, use `vi.runOnlyPendingTimers()` after each `userEvent.hover()` call or use the `showTooltip` helper function from `tooltipTestHelpers.ts` to account for requestAnimationFrame delays
Applied to files:
test/polar/Pie.spec.tsxtest/chart/LineChart.spec.tsxstorybook/stories/Examples/Tooltip.stories.tsx
📚 Learning: 2025-12-06T03:36:59.377Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-06T03:36:59.377Z
Learning: Applies to **/storybook/**/*.stories.{ts,tsx} : When adding new Storybook stories, prioritize high fidelity examples intended for publication on the website and in Storybook UI; use unit tests or VR tests for low fidelity tests
Applied to files:
storybook/stories/Examples/Tooltip.stories.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: Build, Test, Pack
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (9)
test/state/selectors/axisSelectors.spec.tsx (1)
1-5: Import switch to@recharts/devtoolslooks safe and keeps the test deterministic.
No logic change; seed-based data stays stable.storybook/stories/Examples/Tooltip.stories.tsx (1)
1-4: LGTM: Storybook now reuses the sharedgenerateMockDatahelper.
Main thing to verify is that the Storybook build includes@recharts/devtools(see the workspace-deps check in the rootpackage.jsoncomment).test/polar/Pie.spec.tsx (1)
1-5: LGTM: centralized mock data generator reduces duplicated helpers.test/state/selectors/selectDisplayedData.spec.tsx (1)
1-5: LGTM: import-only change; seeded data keeps snapshots/assertions stable.test/chart/LineChart.spec.tsx (1)
1-5: LGTM: tests now share the same mock-data source as other suites.www/src/components/Shared/StackBlitzLink.tsx (1)
72-88: Pin StackBlitz dependencies to specific versions instead of 'latest'. Using 'latest' makes examples non-reproducible and risks breaking overnight when new releases deploy. Pinrechartsand@recharts/devtoolsto known-good versions that match the project's validated releases, and include comments noting they should be kept in sync with root package.json and repository releases.package.json (1)
99-134: Remove this review comment;@recharts/devtoolsdoes not exist in the Recharts monorepo or npm registry.A web search confirms that
@recharts/devtoolsis neither a published npm package nor an existing workspace package in the official Recharts monorepo. The concern about declaring this dependency inwww/package.jsoncannot apply to a non-existent package. If a devtools package is planned as a future workspace, the hoisting concern is valid in general principle, but it does not apply to the current codebase.Likely an incorrect or invalid review comment.
www/src/docs/exampleComponents/ScatterChart/ScatterChartPerformance.tsx (2)
4-15: LGTM! Data generation logic is clean and appropriate for documentation examples.The seeded random number generator ensures reproducible data, which is ideal for documentation and testing. The nested array structure correctly generates 100 scatter series with 10 points each, and the usage of
betweenfor bounded random values is consistent and clear.The code relies on type inference, which is acceptable in documentation examples. Proper typing will depend on the TypeScript definitions from
@recharts/devtoolsverified above.
2-2: Verify that@recharts/devtoolsis properly configured with TypeScript definitions.The package must have proper TypeScript type definitions to comply with coding guidelines that prohibit implicit
anytypes. Check that:
@recharts/devtoolsis listed as a dev dependency inpackage.json- The package exports TypeScript type definitions
- The
randomandbetweenfunction signatures match the usage in this file
| "@eslint/compat": "^1.3.2", | ||
| "@eslint/js": "^9.35.0", | ||
| "@playwright/experimental-ct-react": "1.57.0", | ||
| "@recharts/devtools": "^0.0.2", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Verify npm metadata for 0.0.2 + inspect package exports & browser-safety.
PKG='@recharts/devtools'
VER='0.0.2'
META="$(mktemp)"
curl -fsSL "https://registry.npmjs.org/${PKG}" > "$META"
# Ensure version exists
jq -e --arg v "$VER" '.versions[$v]' "$META" >/dev/null && echo "✓ Version $VER exists" || echo "✗ Version $VER not found"
# Download tarball for 0.0.2 and inspect package.json (exports, dependencies)
TARBALL="$(jq -r --arg v "$VER" '.versions[$v].dist.tarball' "$META")"
WORK="$(mktemp -d)"
curl -fsSL "$TARBALL" -o "$WORK/pkg.tgz"
tar -xzf "$WORK/pkg.tgz" -C "$WORK"
echo "== package/package.json =="
cat "$WORK/package/package.json"Repository: recharts/recharts
Length of output: 281
🌐 Web query:
@recharts/devtools npm package version 0.0.2
💡 Result:
I couldn't find any record of a scoped package named @recharts/devtools or a version 0.0.2 on the public npm registry. Searches of the Recharts package listings and registry mirrors show the main recharts packages but not @recharts/devtools. [1][2]
If you want to double-check locally, run:
- npm view @recharts/devtools versions
References:
- Recharts package info on npm. [1]
- Recharts package.json on unpkg (registry mirror). [2]
Remove @recharts/devtools dependency — package does not exist on npm registry.
The package @recharts/devtools version 0.0.2 is not published on npm. Installing this dependency will fail during npm install. Either remove this line or publish the package to a registry.
🤖 Prompt for AI Agents
In package.json around line 112, the dependency entry "@recharts/devtools":
"^0.0.2" references a package that isn't published to the npm registry and will
break npm install; remove this dependency line from package.json (or replace it
with a valid published package/version or an internal registry URL if you intend
to keep it), then run npm install and update any code/imports that reference
@recharts/devtools to avoid unresolved module errors.
There was a problem hiding this comment.
It does exist. I published it few minutes ago: https://www.npmjs.com/package/@recharts/devtools
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #6766 +/- ##
=======================================
Coverage 93.70% 93.70%
=======================================
Files 515 515
Lines 43011 42995 -16
Branches 5018 5012 -6
=======================================
- Hits 40302 40289 -13
+ Misses 2703 2700 -3
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
Staging Deployment Details
These deployments will remain available for 30 days. To update snapshots: Comment |
Bundle ReportBundle size has no change ✅ |
1 participant
Motivation and Context
I want to use these in website examples but I don't want to repeat them everywhere. We can't import from www because of stackblitz integration.
Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.