jest snapshot className issues

• I have searched the issues of this repository and believe that this is not a duplicate.

Eventually this is related to #9433 , but i’m not sure.

Expected Behavior

Snapshots should succeed when nothing was changed.

Current Behavior

Whenever introducing a new withStyles() Component or simply updating material-ui to the latest beta our jest test fails due to things like:

-          className="MuiTypography-root-104 MuiTypography-body1-113"
+          className="MuiTypography-root-111 MuiTypography-body1-120"
// or
-        className="MuiExpansionPanelSummary-content-169"
+        className="MuiExpansionPanelSummary-content-176"

basically the appended number changes.

Steps to Reproduce (for bugs)

Sorry I think there is no easy sandbox reproduction possible.

Context

We switched to material-ui from our existing global-css/deterministic className solution where we were able to easily snapshot components and check if they were altered. Now it seems like we have to adjust our setup, but I don’t now how.

Your Environment

Tech	Version
Material-UI	basically all the v1 beta branches since we started using it (~8+)
React	16

[oldwin]

For Storybook snapshots I use next thing:

.storybook/config.js

import React from 'react';
import JssProvider from 'react-jss/lib/JssProvider';

const generateClassName = (rule, styleSheet) =>
  `${styleSheet.options.classNamePrefix}-${rule.key}`;

addDecorator(story => (
   <JssProvider generateClassName={generateClassName}>
      {story()}
   </JssProvider>
));

...

As result I got the same class names but without counter suffix

Does anything wrong?

[denyo]

Comments and snippets in this issue refer to JssProvider. The same works with material’s StylesProvider like

const generateClassName = (rule, styleSheet) => `${styleSheet.options.classNamePrefix}-${rule.key}`;

<StylesProvider generateClassName={generateClassName}>
    <ThemeProvider theme={theme}>
        <Component />
    </ThemeProvider>
</StylesProvider>