Skip to content

[docs] Add Testing section to Rating component doc #46268

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

Merged
merged 4 commits into from
Jun 4, 2025

Conversation

0210shivam
Copy link
Contributor

@0210shivam 0210shivam commented Jun 3, 2025

This PR adds a new "Testing" section to the Rating component documentation.

Closes #38828

Motivation

When testing the Rating component in environments like Jest + jsdom, certain user interactions (e.g., hover-based selection) may not behave as expected. This is due to getBoundingClientRect() returning 0 values by default in jsdom, which can cause issues such as NaN being passed to the onChange handler.

What’s included

  • A warning about the limitation in test environments that do not fully implement layout behavior.
  • A recommended test pattern using fireEvent instead of userEvent.
  • A note on potential pitfalls when using userEvent.click() in such contexts.

Example

fireEvent.click(screen.getByLabelText("2 Stars"));

@mui-bot
Copy link

mui-bot commented Jun 3, 2025

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 3a4d75c

@DiegoAndai
Copy link
Member

DiegoAndai commented Jun 3, 2025

Hey @mapache-salvaje! May I assign you for review of this docs addition? thanks!

Signed-off-by: Diego Andai <[email protected]>
@zannager zannager added docs Improvements or additions to the documentation component: rating This is the name of the generic UI component, not the React module! labels Jun 4, 2025
Copy link
Contributor

@mapache-salvaje mapache-salvaje left a comment

Choose a reason for hiding this comment

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

Some small copyedits here, otherwise LGTM!

@mapache-salvaje mapache-salvaje changed the title docs(Rating): add testing caveats for jsdom environments [docs] Add Testing section to Rating component doc Jun 4, 2025
Co-authored-by: mapache-salvaje <[email protected]>
Signed-off-by: Shivam Shrivastava <[email protected]>
@0210shivam
Copy link
Contributor Author

Hi @DiegoAndai ,The PR has been reviewed and updated with some changes. Could you please proceed further when you get a chance? Thanks!

Co-authored-by: mapache-salvaje <[email protected]>
Signed-off-by: Shivam Shrivastava <[email protected]>
@0210shivam 0210shivam force-pushed the docs/rating-testing-caveat branch from 081aa98 to 3a4d75c Compare June 4, 2025 16:25
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

Thanks @0210shivam

@0210shivam
Copy link
Contributor Author

Thanks @0210shivam

My pleasure! Thanks for the opportunity — excited to keep contributing to MUI.

@DiegoAndai DiegoAndai merged commit 4cbb54e into mui:master Jun 4, 2025
23 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: rating This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[docs][Rating] Testing the component with @testing-library/user-event results in NaN
5 participants