Closed challme28 closed 1 month ago
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 ?
There is no
StylesProvider
but we do haveThemeProvider
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.
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.
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