2

Since I've upgraded to v4 of Material UI, I'm having an issue with my classnames on snapshot testing. Meaning, the classnames are either on a non-deterministic order or there are issues with the counter.

I've never had this issue with v3 and I'm not using withStyles which seems to be related to this issue for others.

I've seen different issues on Github (using JssProvider for instance or shallow rendering) but I'd like to not add dependencies for this particular problem.

    - Snapshot
    + Received

    @@ -1,7 +1,7 @@
      <button
-   className="MuiButtonBase-root MuiButton-root MuiButton-containedPrimary MuiButton-contained"
+   className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"

or

-         className="PrivateNotchedOutline-legend-36"
+         className="PrivateNotchedOutline-legend-37"
  • I expect the classnames to change only if I changed the component.
  • It seems to change randomly.
Batiste
  • 21
  • 1
  • 4

1 Answers1

1

Had a similar situation where MuiButtonBase-root would load at different times on different pages, sometimes overriding things like MuiButton-contained which would defeat the color and padding. This seemed to be completely random.

This stopped after rerunning Yarn with a specific version of the "@material-ui/core" library in package.json. For example if the entry for @material-ui/core looks like this:

"dependencies" : {
    "@material-ui/core": "^4.1.3",

Remove the initial caret (^) so it looks like this: 

"dependencies" : {
    "@material-ui/core": "4.1.3",

I was part way through the suggestions in the links below when the symptom stopped.

  1. https://material-ui.com/getting-started/faq/#react-class-name-hydration-mismatch
  2. Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh
Simon
  • 456
  • 6
  • 11