Skip to content

Add vite 7 integration tests#87

Merged
PavelVanecek merged 3 commits intomainfrom
vite-7
Dec 16, 2025
Merged

Add vite 7 integration tests#87
PavelVanecek merged 3 commits intomainfrom
vite-7

Conversation

@PavelVanecek
Copy link
Collaborator

@PavelVanecek PavelVanecek commented Dec 16, 2025

Tried to reproduce recharts/recharts#6776 but could not.

Summary by CodeRabbit

  • New Features

    • Added a Vite 7 + React 19 project template with TypeScript, build/run scripts, dev server, and a sample charting app.
  • Documentation

    • Added a README with setup and ESLint guidance and example configurations.
  • Tests

    • Included unit tests and test runner config for the new template.
  • Chores

    • Added a .gitignore for common dev artifacts and updated CI to support pnpm and test matrix entries.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Dec 16, 2025

Walkthrough

Adds a new integration project at integrations/vite7-react19/ (Vite 7 + React 19) with project scaffolding: package, build and TypeScript configs, ESLint, Vite config, app source, styles, tests, .gitignore, README, and test-registry entries for npm/yarn/pnpm.

Changes

Cohort / File(s) Summary
Project metadata & ignore
integrations/vite7-react19/.gitignore, integrations/vite7-react19/package.json, integrations/vite7-react19/README.md
New package metadata, scripts, dependencies/devDependencies, README documentation, and .gitignore for development artifacts.
Build & TypeScript configs
integrations/vite7-react19/vite.config.ts, integrations/vite7-react19/tsconfig.json, integrations/vite7-react19/tsconfig.app.json, integrations/vite7-react19/tsconfig.node.json
Vite config registering React plugin with babel-plugin-react-compiler; test environment set to jsdom; TypeScript split configs (app/node/root) with strict options and references.
ESLint config
integrations/vite7-react19/eslint.config.js
New flat ESLint configuration targeting TS/TSX with recommended JS, TypeScript, React Hooks, and React Refresh extensions and browser globals.
App entry & HTML
integrations/vite7-react19/index.html, integrations/vite7-react19/src/main.tsx
HTML entry and React DOM mount point rendering the app.
Application code
integrations/vite7-react19/src/App.tsx, integrations/vite7-react19/src/App.spec.tsx
New App component rendering a Recharts stacked BarChart and corresponding unit test asserting SVG and bar rectangles.
Styling
integrations/vite7-react19/src/index.css, integrations/vite7-react19/src/App.css
Global light/dark theme and component-specific CSS (layout, animations, accessible motion preference).
Test registry updates
test-ui/server/scripts/test-registry.ts
Adds three new direct-dependency test entries for Vite 7 + React 19 across npm, yarn, and pnpm (marked stable).
CI workflow tweak
.github/workflows/integ.yml
Adds pnpm setup step and adjusts test execution argument quoting for the matrix test directory.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–30 minutes

  • Pay attention to tsconfig references and consistency between tsconfig.app.json and tsconfig.node.json.
  • Verify vite.config.ts babel-plugin-react-compiler usage and compatibility flags.
  • Confirm eslint.config.js flat config extends/plugins are resolved correctly in the repo environment.
  • Check test-registry additions follow existing schema and environment expectations.

Possibly related PRs

Suggested reviewers

  • ckifer

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Add vite 7 integration tests' directly and accurately summarizes the main change—adding a new Vite 7 integration test setup with React 19, which is the primary purpose of this changeset.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch vite-7

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🧹 Nitpick comments (2)
test-ui/server/scripts/test-registry.ts (1)

212-241: Consider marking new tests as experimental initially.

These tests are marked as "stable", which per coding guidelines means they must run reliably in CI on every commit. Since these are brand new tests that haven't been validated in the CI environment yet, it may be safer to start them as "experimental" and promote them to stable after they've proven reliable.

If you prefer a more cautious approach, apply this diff:

   {
     name: "npm:integrations/vite7-react19",
     description:
       "Trying to reproduce https://github.com/recharts/recharts/issues/6776",
-    stability: "stable",
+    stability: "experimental",
     type: "direct",
     packageManager: "npm",
     integrationPath: "integrations/vite7-react19",
     dependencies: { react: "19", vite: "7" },
   },
   {
     name: "yarn:integrations/vite7-react19",
     description:
       "Trying to reproduce https://github.com/recharts/recharts/issues/6776",
-    stability: "stable",
+    stability: "experimental",
     type: "direct",
     packageManager: "yarn",
     integrationPath: "integrations/vite7-react19",
     dependencies: { react: "19", vite: "7" },
   },
   {
     name: "pnpm:integrations/vite7-react19",
     description:
       "Trying to reproduce https://github.com/recharts/recharts/issues/6776",
-    stability: "stable",
+    stability: "experimental",
     type: "direct",
     packageManager: "pnpm",
     integrationPath: "integrations/vite7-react19",
     dependencies: { react: "19", vite: "7" },
   },
integrations/vite7-react19/package.json (1)

16-16: Consider pinning the recharts version for test stability.

Using "latest" for the recharts dependency may lead to non-deterministic test results if breaking changes are introduced. For integration tests, it's generally better to pin to a specific version or use a range constraint.

If you want more stable tests, apply this diff:

   "dependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "recharts": "latest"
+    "recharts": "^2.15.0"
   },

Alternatively, if the goal is to always test against the latest version, you may keep it as-is, but be aware that tests could break due to upstream changes in recharts.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e05e53f and cc33d2c.

⛔ Files ignored due to path filters (2)
  • integrations/vite7-react19/public/vite.svg is excluded by !**/*.svg
  • integrations/vite7-react19/src/assets/react.svg is excluded by !**/*.svg
📒 Files selected for processing (15)
  • integrations/vite7-react19/.gitignore (1 hunks)
  • integrations/vite7-react19/README.md (1 hunks)
  • integrations/vite7-react19/eslint.config.js (1 hunks)
  • integrations/vite7-react19/index.html (1 hunks)
  • integrations/vite7-react19/package.json (1 hunks)
  • integrations/vite7-react19/src/App.css (1 hunks)
  • integrations/vite7-react19/src/App.spec.tsx (1 hunks)
  • integrations/vite7-react19/src/App.tsx (1 hunks)
  • integrations/vite7-react19/src/index.css (1 hunks)
  • integrations/vite7-react19/src/main.tsx (1 hunks)
  • integrations/vite7-react19/tsconfig.app.json (1 hunks)
  • integrations/vite7-react19/tsconfig.json (1 hunks)
  • integrations/vite7-react19/tsconfig.node.json (1 hunks)
  • integrations/vite7-react19/vite.config.ts (1 hunks)
  • test-ui/server/scripts/test-registry.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
integrations/**/package.json

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

integrations/**/package.json: npm overrides field must be used in npm-based tests to resolve dependency conflicts; behavior differs between Node.js versions (works in v22, may fail in v24+)
yarn resolutions field must be used in yarn-based tests to resolve dependency conflicts

Files:

  • integrations/vite7-react19/package.json
test-ui/server/scripts/test-registry.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

test-ui/server/scripts/test-registry.ts: Test Registry (test-ui/server/scripts/test-registry.ts) must be the single source of truth for all test definitions, containing metadata: test name, stability (stable/experimental), type, package manager, and dependencies
Stable tests (marked with isCi: true) must run reliably in CI on every commit; experimental tests (isCi: false) should be marked as research/debugging only

Files:

  • test-ui/server/scripts/test-registry.ts
test-ui/server/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

test-ui/server/**/*.ts: Error handling in failed test phases must capture and display full stdout/stderr output, not just 'command failed' messages, with error objects containing stdout property
Server must expand ~ in file paths (path expansion) when receiving from frontend, but frontend should not attempt path expansion

Files:

  • test-ui/server/scripts/test-registry.ts
🧠 Learnings (15)
📓 Common learnings
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/test/**/*.{ts,tsx} : Test framework must use Vitest for unit testing, located in `test-ui/test/`, with tests for utility functions, Redux selectors, and components using React Testing Library
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/vite.config.ts : Vite configuration must be properly set up in `test-ui/vite.config.ts` for frontend build and dev server
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/vite.config.ts : Vite configuration must be properly set up in `test-ui/vite.config.ts` for frontend build and dev server

Applied to files:

  • integrations/vite7-react19/vite.config.ts
  • integrations/vite7-react19/tsconfig.app.json
  • integrations/vite7-react19/eslint.config.js
  • integrations/vite7-react19/src/main.tsx
  • integrations/vite7-react19/src/App.spec.tsx
  • integrations/vite7-react19/index.html
  • integrations/vite7-react19/package.json
  • integrations/vite7-react19/tsconfig.node.json
  • integrations/vite7-react19/tsconfig.json
  • test-ui/server/scripts/test-registry.ts
  • integrations/vite7-react19/README.md
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/test/**/*.{ts,tsx} : Test framework must use Vitest for unit testing, located in `test-ui/test/`, with tests for utility functions, Redux selectors, and components using React Testing Library

Applied to files:

  • integrations/vite7-react19/vite.config.ts
  • integrations/vite7-react19/tsconfig.app.json
  • integrations/vite7-react19/eslint.config.js
  • integrations/vite7-react19/src/main.tsx
  • integrations/vite7-react19/src/App.spec.tsx
  • integrations/vite7-react19/src/App.tsx
  • integrations/vite7-react19/index.html
  • integrations/vite7-react19/package.json
  • integrations/vite7-react19/tsconfig.json
  • test-ui/server/scripts/test-registry.ts
  • integrations/vite7-react19/README.md
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/nodemon.json : nodemon configuration in `test-ui/nodemon.json` must enable auto-restart of server on TypeScript file changes

Applied to files:

  • integrations/vite7-react19/vite.config.ts
  • integrations/vite7-react19/tsconfig.app.json
  • integrations/vite7-react19/tsconfig.node.json
  • integrations/vite7-react19/tsconfig.json
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/tsconfig.json : TypeScript configuration in test UI must enable strict type checking and run `npm run check-types` to validate types

Applied to files:

  • integrations/vite7-react19/tsconfig.app.json
  • integrations/vite7-react19/tsconfig.node.json
  • integrations/vite7-react19/tsconfig.json
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/src/App.tsx : Main app component (`test-ui/src/App.tsx`) must render the test UI with all filter and execution controls

Applied to files:

  • integrations/vite7-react19/src/main.tsx
  • integrations/vite7-react19/src/App.spec.tsx
  • integrations/vite7-react19/src/App.tsx
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to integrations/**/package.json : npm `overrides` field must be used in npm-based tests to resolve dependency conflicts; behavior differs between Node.js versions (works in v22, may fail in v24+)

Applied to files:

  • integrations/vite7-react19/package.json
  • integrations/vite7-react19/tsconfig.node.json
  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to integrations/**/package.json : yarn `resolutions` field must be used in yarn-based tests to resolve dependency conflicts

Applied to files:

  • integrations/vite7-react19/package.json
  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-11-30T04:39:58.883Z
Learnt from: PavelVanecek
Repo: recharts/recharts-integ PR: 80
File: .github/workflows/integ.yml:57-57
Timestamp: 2025-11-30T04:39:58.883Z
Learning: In .github/workflows/integ.yml, Node.js version 22.18.x is the minimum required version because it enables built-in TypeScript type stripping by default, which is essential for the test-ui TypeScript/ESM implementation.

Applied to files:

  • integrations/vite7-react19/tsconfig.node.json
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Node.js version requirement: Server must run on Node.js v22.18 or higher for native TypeScript support (runs .ts files directly without compilation)

Applied to files:

  • integrations/vite7-react19/tsconfig.node.json
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/server/scripts/test-registry.ts : Test Registry (`test-ui/server/scripts/test-registry.ts`) must be the single source of truth for all test definitions, containing metadata: test name, stability (stable/experimental), type, package manager, and dependencies

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/server/scripts/test-registry.ts : Stable tests (marked with `isCi: true`) must run reliably in CI on every commit; experimental tests (`isCi: false`) should be marked as research/debugging only

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: ReUse the same test registry (`test-ui/server/scripts/test-registry.ts`) for both CLI and UI tools to ensure consistency

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to {list.js,run-test.sh,pack-and-run.sh} : CLI tools (`list.js`, `run-test.sh`, `pack-and-run.sh`) must remain stable and reliable as they are called from the main recharts repository on every pull request

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Dependency resolution must handle complex peer dependencies: support React 16-19, Redux Toolkit v1 and v2 (noting that Redux v1 supports React 16-18, v2 requires React 18+)

Applied to files:

  • test-ui/server/scripts/test-registry.ts
⏰ 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). (15)
  • GitHub Check: yarn:integrations/ts-react18 on node 25.x
  • GitHub Check: npm:my-charts-react18:app-react18 on node 25.x
  • GitHub Check: npm:my-charts-react19:app-react18 on node 25.x
  • GitHub Check: npm:my-charts-react19:app-react19 on node 25.x
  • GitHub Check: yarn:my-charts-react17:app-react16 on node 25.x
  • GitHub Check: npm:integrations/ts-react16-overrides on node 24.x
  • GitHub Check: npm:integrations/ts-react19 on node 25.x
  • GitHub Check: npm:integrations/ts4-react17 on node 24.x
  • GitHub Check: yarn:my-charts-react17:app-react16 on node 24.x
  • GitHub Check: npm:my-charts-react18:app-react18 on node 24.x
  • GitHub Check: npm:my-charts-react19:app-react18 on node 24.x
  • GitHub Check: yarn:integrations/ts-react16-overrides on node 22.18.x
  • GitHub Check: npm:my-charts-react18:app-react18 on node 22.18.x
  • GitHub Check: npm:my-charts-react19:app-react18 on node 22.18.x
  • GitHub Check: npm:integrations/ts-react16-overrides on node 22.18.x
🔇 Additional comments (13)
integrations/vite7-react19/tsconfig.node.json (1)

1-26: LGTM! Well-configured Node TypeScript setup.

The configuration appropriately uses bundler mode, strict type checking, and modern TypeScript options like erasableSyntaxOnly and noUncheckedSideEffectImports for enhanced type safety.

integrations/vite7-react19/.gitignore (1)

1-24: LGTM! Comprehensive ignore patterns.

The gitignore appropriately covers all necessary artifacts including logs, dependencies, build outputs, and editor-specific files.

integrations/vite7-react19/README.md (1)

1-75: LGTM! Clear and helpful documentation.

The README provides comprehensive guidance on plugin options, React Compiler usage, and ESLint configuration with practical examples.

integrations/vite7-react19/eslint.config.js (1)

1-23: LGTM! Solid ESLint configuration for React + TypeScript.

The configuration appropriately uses the flat config format with recommended rules from TypeScript ESLint, React Hooks, and React Refresh plugins.

integrations/vite7-react19/tsconfig.json (1)

1-7: LGTM! Correct project references setup.

The configuration properly uses TypeScript project references to split app and Node tool configurations, enabling faster incremental builds.

integrations/vite7-react19/src/App.spec.tsx (1)

5-12: LGTM! Test structure is sound.

The test correctly uses Vitest and Testing Library (as per project standards) and validates the core Recharts rendering behavior. The assertion for 4 bars should match the actual bars rendered by the App component.

integrations/vite7-react19/src/main.tsx (1)

1-10: LGTM! Standard React 19 bootstrap.

The entry point correctly uses createRoot from React 19 and wraps the app in StrictMode. The non-null assertion on Line 6 is safe here since index.html includes the root element.

integrations/vite7-react19/index.html (1)

1-13: Favicon reference is correctly configured.

The favicon reference to /vite.svg is valid. Vite generates a simple favicon for our app and places it in public/vite.svg, and the file exists in the project. Public assets should be referenced using root absolute path - for example, public/icon.png should be referenced in source code as /icon.png, which is correctly implemented here. No further action needed.

integrations/vite7-react19/vite.config.ts (1)

1-17: LGTM! Vite configuration is properly set up for React 19 and Vitest.

The configuration correctly:

  • References Vitest types for test configuration
  • Enables the React plugin with React Compiler (stable in React 19)
  • Sets jsdom environment for component testing
integrations/vite7-react19/tsconfig.app.json (1)

1-28: LGTM! TypeScript configuration is properly set up for Vite + React 19.

The configuration correctly:

  • Uses ES2022 target and ESNext modules for modern JavaScript
  • Enables bundler mode for Vite compatibility
  • Uses react-jsx transform (React 17+ modern JSX)
  • Enables strict type checking with additional linting flags
  • Includes appropriate compiler options for a Vite project
integrations/vite7-react19/src/index.css (1)

1-68: LGTM! Standard Vite template styling with light/dark theme support.

The CSS provides appropriate base styling with system font stack, color scheme support, and responsive light/dark mode theming.

integrations/vite7-react19/src/App.css (1)

1-42: LGTM! App-specific styling with accessibility consideration.

The CSS properly includes animation with respect for user motion preferences via the prefers-reduced-motion media query.

integrations/vite7-react19/package.json (1)

34-35: Vite 7.2.4 and Vitest 4.0.15 versions are valid and compatible.

Both versions are current and supported. Vitest 4.x works with Vite 7.2.4 without the TypeScript errors that occurred with earlier 7.x patches.

@@ -0,0 +1,29 @@
import './App.css';
import {Bar, BarChart, BarStack, Legend, Tooltip, XAxis, YAxis} from 'recharts';
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

BarStack is not a valid Recharts component.

Recharts does not export a BarStack component. To create stacked bars, you should use the stackId prop on individual Bar components.

Apply this diff to fix the import and component usage:

-import {Bar, BarChart, BarStack, Legend, Tooltip, XAxis, YAxis} from 'recharts';
+import {Bar, BarChart, Legend, Tooltip, XAxis, YAxis} from 'recharts';

Then update the chart structure:

             <BarChart
                 width={600}
                 height={300}
                 data={[
                     { name: 'A', value1: 100, value2: 50 },
                     { name: 'B', value1: 200, value2: 130 },
                 ]}
             >
                 <XAxis dataKey="name" />
                 <YAxis />
-                <BarStack>
-                    <Bar dataKey="value1" fill="gold" name="Tooltip value 1" />
-                    <Bar dataKey="value2" fill="silver" name="Tooltip value 2" />
-                </BarStack>
+                <Bar dataKey="value1" fill="gold" name="Tooltip value 1" stackId="a" />
+                <Bar dataKey="value2" fill="silver" name="Tooltip value 2" stackId="a" />
                 <Legend />
                 <Tooltip />
             </BarChart>

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents
In integrations/vite7-react19/src/App.tsx around line 2, the code imports a
non-existent Recharts component `BarStack`; remove `BarStack` from the import
list and only import valid components (e.g., Bar, BarChart, Legend, Tooltip,
XAxis, YAxis). Then modify the chart JSX to replace any <BarStack> wrapper with
individual <Bar> elements that include the same stackId value (e.g.,
stackId="a") so bars are stacked, and ensure each Bar has the correct dataKey
and styling; keep Legend, Tooltip, XAxis, and YAxis as-is.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Recharts exports BarStack since version 3.6

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check the recharts version in package.json
cat integrations/vite7-react19/package.json | jq '.dependencies.recharts'

Length of output: 8


🌐 Web query:

Recharts 3.6 BarStack component

💡 Result:

There’s no separate BarStack component in Recharts — stacking is done with multiple elements that share the same stackId inside a BarChart (and you can control stacking behavior with the chart’s stackOffset). Example:

Relevant docs: Bar component (props like stackId, minPointSize, label, etc.) and BarChart / chart options (stackOffset: 'none' | 'expand' | 'wiggle' | 'silhouette'). [1][2]

Sources:
[1] Recharts — Bar API.
[2] Recharts — API / BarChart (stackOffset and chart props).


🏁 Script executed:

#!/bin/bash
# Check the full App.tsx file to see BarStack usage
cat integrations/vite7-react19/src/App.tsx

Length of output: 865


🌐 Web query:

Recharts version 3.6 release notes changelog

💡 Result:

I couldn’t find any Recharts v3.6 release notes — the official Releases page shows v3.5.1 as the latest 3.x release (and the release list up to v3.5.1). See the GitHub releases page and the release history. [1][2]

Sources:
[1] Recharts Releases (GitHub). [2] Recharts release history / registry listing.


🏁 Script executed:

#!/bin/bash
# Search for BarStack in Recharts GitHub repository
# Check latest commits and if BarStack exists in the source
rg -i "barstack" --type ts --type tsx 2>/dev/null || echo "No BarStack found in local search"

# Also check if the test actually passes
cat integrations/vite7-react19/src/App.spec.tsx

Length of output: 490


🌐 Web query:

Recharts BarStack component GitHub source code

💡 Result:

Do you mean the Recharts "Bar" component (which supports stacking via stackId) or a different "BarStack" component (e.g., from visx)?


🏁 Script executed:

#!/bin/bash
# Check if there are any recent npm releases beyond 3.5.1
# Use npm view to check available versions
echo "Checking available Recharts versions on npm:"
npm view recharts versions --json | tail -20

# Also check the latest version specifically
echo -e "\nLatest version on npm:"
npm view recharts version

Length of output: 321


🌐 Web query:

site:github.com recharts BarStack 2024 2025

💡 Result:

I searched GitHub for Recharts-related Bar/stack (2024–2025). Relevant results:

  • Recharts main repo (overview/documentation). [1]
  • Issue: BarChart not rendering inside ResponsiveContainer — opened May 26, 2024 (#4586). [2]
  • Issue: Incorrect hovering behaviour of StackedBarChart — opened Oct 17, 2024 (#5124, later closed / addressed for 3.0). [3]
  • Issue: stacked bar chart radius (open, older discussion impacting stacked bars). [4]

If you want, I can open any of those issues and extract details (dates, comments, PRs, or current status).


🏁 Script executed:

#!/bin/bash
# Try to check what's actually exported from the installed recharts package
# by looking at node_modules if it exists, or check package exports
cd integrations/vite7-react19
if [ -d "node_modules/recharts" ]; then
    echo "Checking recharts exports from node_modules:"
    # Look for BarStack in the index or main file
    find node_modules/recharts -name "*.d.ts" -o -name "index.js" | head -5 | xargs grep -l "BarStack" 2>/dev/null || echo "BarStack not found in installed package"
else
    echo "node_modules not present, need to check elsewhere"
fi

Length of output: 49


🌐 Web query:

Recharts 3.6.0 release notes new features

💡 Result:

I can't find a Recharts v3.6.0 release — the official Releases list and docs show v3.5.1 as the latest. See the Recharts GitHub Releases and official site. [1][2]

If you want, I can watch for a v3.6.0 release and summarize the release notes when it appears.

Sources:
[1] Recharts releases (GitHub). [2] Recharts official site (recharts.github.io).


🏁 Script executed:

#!/bin/bash
# Clone the recharts repository and check for BarStack
cd /tmp
git clone --depth 1 https://github.com/recharts/recharts.git recharts-repo 2>/dev/null || echo "Repo exists"
cd recharts-repo

# Search for BarStack export or definition
echo "Searching for BarStack in Recharts source:"
rg -i "export.*BarStack" --type ts --type tsx 2>/dev/null || rg "BarStack" src/ -A 2 -B 2 2>/dev/null | head -30

Length of output: 1955


@PavelVanecek You're absolutely right, and I apologize for the incorrect review! 🙏

I've confirmed that BarStack is indeed a valid Recharts component that was added in version 3.6.0. Looking at the Recharts source code, BarStack is exported from src/index.ts and provides a convenient wrapper for grouping Bar components with a shared stackId.

From the source code, BarStack:

  • Sets a stackId for all child Bar components (and takes precedence over individual Bar stackIds)
  • Supports a radius prop for rounding corners of the entire stack
  • Is properly exported and available for use

Your code is correct as written. The import and usage of BarStack are both valid. Thank you for the correction!


🧠 Learnings used
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/src/App.tsx : Main app component (`test-ui/src/App.tsx`) must render the test UI with all filter and execution controls

Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/test/**/*.{ts,tsx} : Test framework must use Vitest for unit testing, located in `test-ui/test/`, with tests for utility functions, Redux selectors, and components using React Testing Library

Comment on lines +212 to +241
{
name: "Vite 7 + React 19 with npm",
description:
"Trying to reproduce https://github.com/recharts/recharts/issues/6776",
stability: "stable",
type: "direct",
packageManager: "npm",
integrationPath: "integrations/vite7-react19",
dependencies: { react: "19", vite: "7" },
},
{
name: "Vite 7 + React 19 with yarn",
description:
"Trying to reproduce https://github.com/recharts/recharts/issues/6776",
stability: "stable",
type: "direct",
packageManager: "yarn",
integrationPath: "integrations/vite7-react19",
dependencies: { react: "19", vite: "7" },
},
{
name: "Vite 7 + React 19 with pnpm",
description:
"Trying to reproduce https://github.com/recharts/recharts/issues/6776",
stability: "stable",
type: "direct",
packageManager: "pnpm",
integrationPath: "integrations/vite7-react19",
dependencies: { react: "19", vite: "7" },
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix test naming convention to match existing pattern.

The new test entries use a human-readable naming format ("Vite 7 + React 19 with npm"), which is inconsistent with all other direct dependency tests in the registry that follow the pattern "packageManager:integrationPath" (e.g., "npm:integrations/ts-react19").

This inconsistency may cause issues with test execution, filtering, or other parts of the system that rely on the naming pattern.

Apply this diff to fix the naming convention:

   {
-    name: "Vite 7 +  React 19 with npm",
+    name: "npm:integrations/vite7-react19",
     description:
       "Trying to reproduce https://github.com/recharts/recharts/issues/6776",
     stability: "stable",
     type: "direct",
     packageManager: "npm",
     integrationPath: "integrations/vite7-react19",
     dependencies: { react: "19", vite: "7" },
   },
   {
-    name: "Vite 7 +  React 19 with yarn",
+    name: "yarn:integrations/vite7-react19",
     description:
       "Trying to reproduce https://github.com/recharts/recharts/issues/6776",
     stability: "stable",
     type: "direct",
     packageManager: "yarn",
     integrationPath: "integrations/vite7-react19",
     dependencies: { react: "19", vite: "7" },
   },
   {
-    name: "Vite 7 +  React 19 with pnpm",
+    name: "pnpm:integrations/vite7-react19",
     description:
       "Trying to reproduce https://github.com/recharts/recharts/issues/6776",
     stability: "stable",
     type: "direct",
     packageManager: "pnpm",
     integrationPath: "integrations/vite7-react19",
     dependencies: { react: "19", vite: "7" },
   },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{
name: "Vite 7 + React 19 with npm",
description:
"Trying to reproduce https://github.com/recharts/recharts/issues/6776",
stability: "stable",
type: "direct",
packageManager: "npm",
integrationPath: "integrations/vite7-react19",
dependencies: { react: "19", vite: "7" },
},
{
name: "Vite 7 + React 19 with yarn",
description:
"Trying to reproduce https://github.com/recharts/recharts/issues/6776",
stability: "stable",
type: "direct",
packageManager: "yarn",
integrationPath: "integrations/vite7-react19",
dependencies: { react: "19", vite: "7" },
},
{
name: "Vite 7 + React 19 with pnpm",
description:
"Trying to reproduce https://github.com/recharts/recharts/issues/6776",
stability: "stable",
type: "direct",
packageManager: "pnpm",
integrationPath: "integrations/vite7-react19",
dependencies: { react: "19", vite: "7" },
},
{
name: "npm:integrations/vite7-react19",
description:
"Trying to reproduce https://github.com/recharts/recharts/issues/6776",
stability: "stable",
type: "direct",
packageManager: "npm",
integrationPath: "integrations/vite7-react19",
dependencies: { react: "19", vite: "7" },
},
{
name: "yarn:integrations/vite7-react19",
description:
"Trying to reproduce https://github.com/recharts/recharts/issues/6776",
stability: "stable",
type: "direct",
packageManager: "yarn",
integrationPath: "integrations/vite7-react19",
dependencies: { react: "19", vite: "7" },
},
{
name: "pnpm:integrations/vite7-react19",
description:
"Trying to reproduce https://github.com/recharts/recharts/issues/6776",
stability: "stable",
type: "direct",
packageManager: "pnpm",
integrationPath: "integrations/vite7-react19",
dependencies: { react: "19", vite: "7" },
},
🤖 Prompt for AI Agents
In test-ui/server/scripts/test-registry.ts around lines 212 to 241, the three
new direct tests use human-readable names which break the existing naming
convention; change each entry's name to follow "packageManager:integrationPath"
(e.g., "npm:integrations/vite7-react19", "yarn:integrations/vite7-react19",
"pnpm:integrations/vite7-react19") so they match other registry entries and
preserve filtering/execution behavior.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

♻️ Duplicate comments (3)
test-ui/server/scripts/test-registry.ts (3)

212-221: Fix naming convention and typo.

This comment addresses issues already flagged in previous reviews:

  1. Naming convention: The test name should follow the pattern "npm:integrations/vite7-react19" to match existing registry entries (already flagged in previous review).

  2. Typo: There's a double space in the name: "Vite 7 + React 19" (two spaces between + and React).


222-231: Fix naming convention and typo.

This comment addresses issues already flagged in previous reviews:

  1. Naming convention: The test name should follow the pattern "yarn:integrations/vite7-react19" to match existing registry entries (already flagged in previous review).

  2. Typo: There's a double space in the name: "Vite 7 + React 19" (two spaces between + and React).


232-241: Fix naming convention and typo.

This comment addresses issues already flagged in previous reviews:

  1. Naming convention: The test name should follow the pattern "pnpm:integrations/vite7-react19" to match existing registry entries (already flagged in previous review).

  2. Typo: There's a double space in the name: "Vite 7 + React 19" (two spaces between + and React).

🧹 Nitpick comments (1)
test-ui/server/scripts/test-registry.ts (1)

205-211: Verify that promoting this test to stable is appropriate.

The test stability has been changed from "experimental" to "stable", which means it will now run in CI on every commit. Based on coding guidelines, stable tests must run reliably in CI. Please confirm that this test has been thoroughly validated and consistently passes before promoting it to stable.

Based on learnings, stable tests must run reliably in CI on every commit; experimental tests should be marked as research/debugging only.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cc33d2c and 28a71d5.

📒 Files selected for processing (2)
  • .github/workflows/integ.yml (1 hunks)
  • test-ui/server/scripts/test-registry.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
test-ui/server/scripts/test-registry.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

test-ui/server/scripts/test-registry.ts: Test Registry (test-ui/server/scripts/test-registry.ts) must be the single source of truth for all test definitions, containing metadata: test name, stability (stable/experimental), type, package manager, and dependencies
Stable tests (marked with isCi: true) must run reliably in CI on every commit; experimental tests (isCi: false) should be marked as research/debugging only

Files:

  • test-ui/server/scripts/test-registry.ts
test-ui/server/**/*.ts

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

test-ui/server/**/*.ts: Error handling in failed test phases must capture and display full stdout/stderr output, not just 'command failed' messages, with error objects containing stdout property
Server must expand ~ in file paths (path expansion) when receiving from frontend, but frontend should not attempt path expansion

Files:

  • test-ui/server/scripts/test-registry.ts
🧠 Learnings (13)
📓 Common learnings
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/test/**/*.{ts,tsx} : Test framework must use Vitest for unit testing, located in `test-ui/test/`, with tests for utility functions, Redux selectors, and components using React Testing Library
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/vite.config.ts : Vite configuration must be properly set up in `test-ui/vite.config.ts` for frontend build and dev server
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/server/scripts/test-registry.ts : Test Registry (`test-ui/server/scripts/test-registry.ts`) must be the single source of truth for all test definitions, containing metadata: test name, stability (stable/experimental), type, package manager, and dependencies

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/server/scripts/test-registry.ts : Stable tests (marked with `isCi: true`) must run reliably in CI on every commit; experimental tests (`isCi: false`) should be marked as research/debugging only

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: ReUse the same test registry (`test-ui/server/scripts/test-registry.ts`) for both CLI and UI tools to ensure consistency

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/test/**/*.{ts,tsx} : Test framework must use Vitest for unit testing, located in `test-ui/test/`, with tests for utility functions, Redux selectors, and components using React Testing Library

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/vite.config.ts : Vite configuration must be properly set up in `test-ui/vite.config.ts` for frontend build and dev server

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to integrations/**/package.json : npm `overrides` field must be used in npm-based tests to resolve dependency conflicts; behavior differs between Node.js versions (works in v22, may fail in v24+)

Applied to files:

  • test-ui/server/scripts/test-registry.ts
  • .github/workflows/integ.yml
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to {list.js,run-test.sh,pack-and-run.sh} : CLI tools (`list.js`, `run-test.sh`, `pack-and-run.sh`) must remain stable and reliable as they are called from the main recharts repository on every pull request

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to integrations/**/package.json : yarn `resolutions` field must be used in yarn-based tests to resolve dependency conflicts

Applied to files:

  • test-ui/server/scripts/test-registry.ts
  • .github/workflows/integ.yml
📚 Learning: 2025-11-30T04:39:58.883Z
Learnt from: PavelVanecek
Repo: recharts/recharts-integ PR: 80
File: .github/workflows/integ.yml:57-57
Timestamp: 2025-11-30T04:39:58.883Z
Learning: In .github/workflows/integ.yml, Node.js version 22.18.x is the minimum required version because it enables built-in TypeScript type stripping by default, which is essential for the test-ui TypeScript/ESM implementation.

Applied to files:

  • test-ui/server/scripts/test-registry.ts
  • .github/workflows/integ.yml
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Applies to test-ui/tsconfig.json : TypeScript configuration in test UI must enable strict type checking and run `npm run check-types` to validate types

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Dependency resolution must handle complex peer dependencies: support React 16-19, Redux Toolkit v1 and v2 (noting that Redux v1 supports React 16-18, v2 requires React 18+)

Applied to files:

  • test-ui/server/scripts/test-registry.ts
📚 Learning: 2025-12-01T14:21:11.776Z
Learnt from: CR
Repo: recharts/recharts-integ PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-01T14:21:11.776Z
Learning: Verify Node.js version compatibility before running tests; in case standard node is unavailable or too old, try `/opt/homebrew/bin/node`; if that fails, require Node.js v22.18 or higher

Applied to files:

  • .github/workflows/integ.yml
⏰ 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). (19)
  • GitHub Check: yarn:my-charts-react18:app-react18 on node 25.x
  • GitHub Check: npm:my-charts-react19:app-react18 on node 25.x
  • GitHub Check: yarn:integrations/ts-react19 on node 25.x
  • GitHub Check: npm:my-charts-react19:app-react19 on node 25.x
  • GitHub Check: yarn:my-charts-react17:app-react16 on node 25.x
  • GitHub Check: npm:my-charts-react17:app-react17 on node 25.x
  • GitHub Check: yarn:integrations/ts-react16-overrides on node 25.x
  • GitHub Check: yarn:integrations/ts-react16-resolutions on node 24.x
  • GitHub Check: npm:integrations/ts4-react17 on node 25.x
  • GitHub Check: npm:integrations/ts-react19 on node 25.x
  • GitHub Check: npm:integrations/ts-react16-skip-lib-check-false on node 24.x
  • GitHub Check: npm:my-charts-react18:app-react18 on node 24.x
  • GitHub Check: npm:my-charts-react16:app-react16 on node 24.x
  • GitHub Check: npm:integrations/ts-react16-overrides on node 24.x
  • GitHub Check: yarn:my-charts-react18:app-react18 on node 22.18.x
  • GitHub Check: Vite 7 + React 19 with npm on node 24.x
  • GitHub Check: npm:my-charts-react19:app-react19 on node 22.18.x
  • GitHub Check: npm:my-charts-react17:app-react16 on node 22.18.x
  • GitHub Check: npm:my-charts-react16:app-react16 on node 22.18.x
🔇 Additional comments (2)
.github/workflows/integ.yml (2)

68-73: LGTM! pnpm installation is properly configured.

The addition of pnpm installation is necessary to support the new pnpm test entries in the test registry (including the three new Vite 7 + React 19 tests and the existing pnpm:react19 test). The configuration is correct:

  • Uses the official pnpm action (v4)
  • Specifies version 10 (current stable)
  • Enables caching for performance
  • Properly placed after Node.js setup and before test execution

75-75: LGTM! Quoting the argument improves shell safety.

Quoting the test directory argument is a shell best practice that prevents issues with word splitting and globbing, particularly important if test names contain spaces or special characters.

@PavelVanecek PavelVanecek merged commit 4d15230 into main Dec 16, 2025
89 checks passed
@PavelVanecek PavelVanecek deleted the vite-7 branch December 16, 2025 10:20
@coderabbitai coderabbitai bot mentioned this pull request Dec 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant