Warning: [JSS] CSSOM.parse is not a function caused by using `insertRule` method

[Tirke]

👋
Following the closing of this issue jestjs/jest#13315 (comment), I'm opening one here.
CSSOM is not really maintained anymore and Jest tests are generating a lot of warning in our tests since we now use jest-environment-jsdom.

● Console

    console.warn
      Warning: [JSS] CSSOM.parse is not a function

      53 |   const registerScroll = useRegisterScrollElement()
      54 |
    > 55 |   const classes = useAppLayoutStyles({
         |                                     ^
      56 |     innerHeight,
      57 |     showNavInDesktopOnly: navType === 'desktop-only',
      58 |   })

Is it possible to switch to something more maintained? (https://github.com/rrweb-io/CSSOM was suggested)

Basic info:

• Node.js version:16.10
• jsdom version: ^20.0.0

Minimal reproduction case

const { JSDOM } = require("jsdom");

const dom = new JSDOM();
const document = dom.window.document;
const styleElement = document.createElement('style');
styleElement.appendChild(document.createTextNode(''));
document.head.appendChild(styleElement);
const sheet = styleElement.sheet;
sheet.insertRule('@media only screen and (orientation: landscape) {}', 0);
// This next line will crash with the error TypeError: CSSOM.parse is not a function
sheet.cssRules[0].insertRule('.elem{background-color: red;}', 0);

How does similar code behave in browsers?

Here is a link to a repro in replit

[fcaballero]

Hello, I'm upgrading jest to version 29 and I'm getting the error @Tirke has reported a year ago, it seems to be a regression

jest@29.6.4
jest-environment-jsdom@29.6.4 depends on jsdom@20.0.3

however I've forced jest-environment-jsdom to use lates jsdom, but the warning still there and making many of my tests to fail because the CSS are not compiled.

[ali-garajian]

I still have the same issue

jest: "29.7.0"
jest-environment-jsdom: "29.7.0"
jsdom: "20.0.3"

[pyotruk]

The workaround solution

In jest.config.ts:

  moduleNameMapper: {
    'react-jss$': '<rootDir>/jssMock.js',
  },

In jssMock.js:

module.exports = {
  __esModule: true,
  createUseStyles: () => () => ({}),
};