Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui][useMediaQuery] Adapt test implementation for React 19 #43269

Merged

Conversation

aarongarciah
Copy link
Member

@aarongarciah aarongarciah commented Aug 12, 2024

While upgrading to React 19 (PR) a useMediaQuery test started to fail.

React 19 is calling React.useMemo and other hooks in a different way than React 18 and that is making our fakeMatchMedia test implementation to fail. This fake implementation keeps a list of matchMedia instances to later be able to assert things, but the list of instances has a different order in React 18 and React 19.

To solve it, I've added a Map of matchMedia instances so we only create one for a given query. This is closer to how the real window.matchMedia is used in useMediaQuery, because it's just a local variable (see source code).

The changes in this PR makes the test pass also in React 19 as you can see in #42824

@aarongarciah aarongarciah self-assigned this Aug 12, 2024
@aarongarciah aarongarciah added package: material-ui Specific to @mui/material hook: useMediaQuery React 19 support PRs required to support React 19 labels Aug 12, 2024
@mui-bot
Copy link

mui-bot commented Aug 12, 2024

Netlify deploy preview

https://deploy-preview-43269--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against afa1ff1

@aarongarciah aarongarciah marked this pull request as ready for review August 12, 2024 09:15
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

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

👍 Map looks better.

@aarongarciah aarongarciah merged commit 722dcce into mui:next Aug 12, 2024
21 of 22 checks passed
@aarongarciah aarongarciah deleted the fix-use-media-query-react-test-react-19 branch August 12, 2024 14:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
hook: useMediaQuery package: material-ui Specific to @mui/material React 19 support PRs required to support React 19
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants