[docs] StylesProvider to avoid ID changes with RTL snapshots #42986
Labels
package: system
Specific to @mui/system
support: docs-feedback
Feedback from documentation page
test
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:
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
withgenerateClassName
to create a wrapper for RTL'srender
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 toStylesProvider
. 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 calledclassname-generator
. I also found this StackOverflow question related to my concerns but also led to not enough documentation aboutStyledEngineProvider
as a replacement forStylesProvider
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
The text was updated successfully, but these errors were encountered: