[docs] StylesProvider to avoid ID changes with RTL snapshots

[challme28]

Related page

https://mui.com/system/styles/api/#stylesprovider

Kind of issue

Missing information

Issue description

As described in this medium article, Snapshot tests become much less useful when paired with MaterialUI’s CSS-in-JS solution. At runtime, MUI guarantees globally unique class names for your app by adding incremental IDs to the end of the generated class names. This class generation method leads to frivolous snapshot updates like the example below:

- emotion-8 .MuiChip-avatarSmall
+ emotion-9 .MuiChip-avatarSmall

Similarly, I've found that ripples are sometimes caught in the tests and fail. Re-testing makes the ripples caught go away or actually stay for subsequent tests.

The author's solution is to use StylesProvider with generateClassName to create a wrapper for RTL's render function to overwrite how these class names are created.

I'm open to believing that my user events like clicking and interacting with the UI also change the snapshots because of some kind of race condition.

Context

MUI's legacy StylesProvider imports it from @mui/styles. As suggested by the deprecated warning, @mui/system installation docs doesn't have anything related to StylesProvider. Furthermore, I found in the migration guide to v5 a mention of it and a possible candidate to what I'm looking for in the experimental API called classname-generator. I also found this StackOverflow question related to my concerns but also led to not enough documentation about StyledEngineProvider as a replacement for StylesProvider

I want to be able to get the best of snapshot testing without MUI's auto-generated class names giving false negatives or a caught ripple in a component.

Search keywords: snapshot classname react-testing-library RTL v5