bug: Vitest fails with "Not implemented: HTMLCanvasElement's getContext()"

[Samridhi1213]

Steps to Reproduce

1. Run npm run test or npx vitest on the current main branch.
2. Observe the multiple stderr lines and warning outputs regarding HTMLCanvasElement getContext.

Proposed Fix

Provide a global fallback mock in vitest.setup.ts to stub HTMLCanvasElement.prototype.getContext with a mock 2‑D context implementing the key methods used by the components (such as fillRect, clearRect, beginPath, closePath, moveTo, lineTo, stroke, fill, fillStyle).

Expected Behavior

Tests should run cleanly without warning/error logs or failing due to unimplemented environment constraints (like the HTMLCanvasElement Canvas API in Node.js).

Fixes #7934

[vercel]

@Samridhi1213 is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

🚨 Hey @Samridhi1213, the CI Pipeline is failing on this PR and it has been marked as status:blocked.

Please fix the issues before this can be reviewed. Here's how:

1. Run checks locally before pushing:

npm run format:check   # Check Prettier formatting
npm run lint           # Run ESLint
npm run typecheck      # TypeScript type check
npm run test           # Run unit tests (Vitest)
npm run build          # Verify production build passes

2. Auto-fix common issues:

npm run format         # Auto-fix formatting with Prettier
npm run lint -- --fix  # Auto-fix lint errors where possible

3. Check the full failure log here:
👉 View CI Run

Once you push a fix and the CI passes, the status:blocked label will be removed automatically. 💪

[Aamod007]

Thank you for fixing this annoying Vitest issue! I reviewed \�itest.config.ts\ and the new \�itest.setup.ts\ file, and mocking the \getContext\ method globally on the \HTMLCanvasElement.prototype\ is the perfect way to prevent those jsdom errors when rendering canvas-heavy components in our tests. Excellent fix, and all CI checks have passed!

Labels assigned:

• \level:beginner: Mocking a global browser prototype is a straightforward testing setup task.
• \quality:clean: Simple and effective setup configuration.
• \ ype:bug: Fixes a test execution bug.
• \ ype:testing: Directly impacts our testing infrastructure.