TypeError: Cannot read properties of null (reading 'deleteRule')

[davidnormo]

In cypress in UI mode, after a test has finished hovering on some of the commands restores a snapshot of the dom. This often causes this error to be thrown:

TypeError: Cannot read properties of null (reading 'deleteRule')
    at DomRenderer.replaceRule (jss.esm.js:2000:1)
    at StyleSheet.replaceRule (jss.esm.js:1146:1)
    at Array.onProcessStyle (jss-plugin-nested.esm.js:87:1)
    at PluginsRegistry.onProcessStyle (jss.esm.js:1313:1)
    at PluginsRegistry.onProcessRule (jss.esm.js:1303:1)
    at StyleSheet.replaceRule (jss.esm.js:1135:1)
    at Array.onProcessStyle (jss-plugin-nested.esm.js:87:1)
    at PluginsRegistry.onProcessStyle (jss.esm.js:1313:1)
    at PluginsRegistry.onProcessRule (jss.esm.js:1303:1)
    at StyleSheet.replaceRule (jss.esm.js:1135:1)

It seems related to this line:

jss/packages/jss/src/DomRenderer.js

Line 418 in 6d17e19

this.element.sheet.deleteRule(index)

The sheet property of the element has been set to null by the browser. A simple null check here to exit early might well fix the issue.

From what I can tell it originates from MUI's makeStyles that changes styles based on props e.g.

makeStyles({
  // run when props changes but because of cypress the expected stylesheet has gone...
  root: (props) => ({
    color: props.a ? '#000' : '#fff'
  })
})

We are using JSS 10.9.2 from MUI 4.11.4

Thanks
Dave