[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

[brijeshb42]

There is no StylesProvider but we do have ThemeProvider which you can use to customize the behavior. For starters, you can disable the ripple for your tests. Also, have you set-up emotion's jest serializer if you are using jest ?

[challme28]

There is no StylesProvider but we do have ThemeProvider which you can use to customize the behavior.

I don't see an option to customize the class names

For starters, you can disable the ripple for your tests.

tyvm. It cleared a lot of snapshots.

Also, have you set-up emotion's jest serializer if you are using jest ?

We are using vitest and we are using createSerializer()

import { createSerializer } from '@emotion/jest';

expect.addSnapshotSerializer(createSerializer());

I'm starting to think that my issue is more related to what gets to be rendered at the time of the snapshot rather than the styles created. I don't want to close the issue in case I do need to customize the class names. I'll try to stress-test and see if I'm doing the tests wrong.

[challme28]

I'll close this because the main issue was my bad test. The state of the component at the time of the snapshot was not idempotent, thus, resulting in different snapshots some times.