Skip to content

[experiment] stub matchMedia global#90

Closed
cloud-walker wants to merge 6 commits intorecharts:mainfrom
cloud-walker:auto-disable-animations
Closed

[experiment] stub matchMedia global#90
cloud-walker wants to merge 6 commits intorecharts:mainfrom
cloud-walker:auto-disable-animations

Conversation

@cloud-walker
Copy link

@cloud-walker cloud-walker commented Feb 5, 2026

Related PR: recharts/recharts#6956

Summary by CodeRabbit

  • Tests

    • Configured test environments across multiple projects to mock media query API, preventing test failures in non-browser environments.
    • Ensures consistent test behavior when code queries media features.
  • Chores

    • Updated test configuration files to include initialization setup that runs before test execution.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 5, 2026

Walkthrough

Adds Vitest setup files with window.matchMedia mocking across 11 projects (apps and integrations) to enable consistent test environment behavior. Updates corresponding vite.config.ts and setupTests.js files to reference these setup modules and reorders imports for consistency.

Changes

Cohort / File(s) Summary
Vite Config Updates
apps-3rd-party/app-react{16,17,18,19}/vite.config.ts, integrations/ts-react{16,16-overrides,16-resolutions,18,19}/vite.config.ts, integrations/vite7-react19/vite.config.ts
Added setupFiles: './vitest.setup.ts' to Vitest test configuration; reordered imports to place defineConfig after react plugin import; added trailing comma for formatting consistency.
Vitest Setup Files
apps-3rd-party/app-react{16,17,18,19}/vitest.setup.ts, integrations/ts-react{16,16-overrides,16-resolutions,18,19}/vitest.setup.ts, integrations/vite7-react19/vitest.setup.ts
Created new setup files that define a beforeEach hook stubbing global window.matchMedia with a mock object returning matches: false and implementing standard MediaQueryList methods (addListener, removeListener, addEventListener, removeEventListener, dispatchEvent) as no-op spies.
Jest Setup File
integrations/ts4-react17/src/setupTests.js
Added jest-dom import and global mock for window.matchMedia in beforeEach hook with matching implementation (matches: false and standard MediaQueryList methods as mocks).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

Suggested reviewers

  • ckifer
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title '[experiment] stub matchMedia global' is specific and clearly summarizes the main change across all modified files, which consistently add window.matchMedia stubs to test setup configurations.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

@PavelVanecek
Copy link
Collaborator

Everyone who uses recharts will see the same problem. Should we handle it in the library instead? Just fallback to animation false if we can't find this method.

@cloud-walker
Copy link
Author

its a "normal" testing issue, cause to the fact that jsdom does not mock matchMedia() I think its a good to let it out, the developers who do integration testing with jsdom knows how to handle those things anyway.

But yeah, maybe jsdom should support it?

That said, now that you made me notice it, I'm in doubt, it may.. work also as you are proposing?

It would make things more opaque maybe, and what if the end developer really wants to stub matchMedia() intentionally (like I have done for the color-mode module on the docs).

Dunno I'm open on the topic, maybe we should check whats other libraries approach on the topic 🤔

@cloud-walker cloud-walker marked this pull request as ready for review February 7, 2026 11:51
@PavelVanecek
Copy link
Collaborator

Normal or not, if we do this then we force everyone (who is testing Recharts) to write a mock that defaults to "return false". We could save them this trouble and default to "return false" directly in the library if we detect the absence of matchMedia. Which is likely to happen in a test environment anyway: https://caniuse.com/matchmedia

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.

2 participants