Material UI injects CSS into JSDOM - "Could not parse CSS stylesheet"

[Flixbox]

We're using a lot of Material UI and some other components that inject CSS, so naturally jsdom throws a bunch of CSS spam into the console. The tests are all green tho.

stderr | src/__tests__/components/Overview/ProofsOf/ProofEdit.test.tsx > ProofEdit with Other > submitting an edited other proof transfers correct resulting state after user input
Error: Could not parse CSS stylesheet
    at exports.createStylesheet (N:\_dev\amogus\webapp\node_modules\jsdom\lib\jsdom\living\helpers\stylesheets.js:34:21)
    at HTMLStyleElementImpl._updateAStyleBlock (N:\_dev\amogus\webapp\node_modules\jsdom\lib\jsdom\living\nodes\HTMLStyleElement-impl.js:68:5)
    at HTMLStyleElementImpl._childTextContentChangeSteps (N:\_dev\amogus\webapp\node_modules\jsdom\lib\jsdom\living\nodes\HTMLStyleElement-impl.js:36:12)
    at HTMLStyleElementImpl._insert (N:\_dev\amogus\webapp\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:822:14)
    at HTMLStyleElementImpl._preInsert (N:\_dev\amogus\webapp\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:756:10)
    at HTMLStyleElementImpl._append (N:\_dev\amogus\webapp\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:862:17)
    at HTMLStyleElementImpl.appendChild (N:\_dev\amogus\webapp\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:598:17)
    at HTMLStyleElement.appendChild (N:\_dev\amogus\webapp\node_modules\jsdom\lib\jsdom\living\generated\Node.js:411:60) @global{body backgroundColor{default:#bcd7e6;paper:#fff;}}

How would I go about getting rid of those errors? I've already tried setting a custom VirtualConsole in the Vitest settings, but I was unsuccessful. It would appear that this causes a range of other issues. All combinations that I've tried throw an error that says If "error" event has no listeners, EventEmitter throws an exception. How would I add this listener?

    test: {
        globals: true,
        environment: "jsdom",
        environmentOptions: {
            jsdom: {
                console: new VirtualConsole()
            }
        }
    },

file:///N:/_dev/amogus/webapp/node_modules/tinypool/dist/esm/index.js:405
      this.port.postMessage(message, taskInfo.transferList);
                ^

DOMException [DataCloneError]: () => {
      // If "error" event has no listeners,
      // EventEmitter throws an exception
    } could not be cloned.
    at WorkerInfo.postTask (file:///N:/_dev/amogus/webapp/node_modules/tinypool/dist/esm/index.js:405:17)
    at ThreadPool.runTask (file:///N:/_dev/amogus/webapp/node_modules/tinypool/dist/esm/index.js:675:16)
    at Tinypool.run (file:///N:/_dev/amogus/webapp/node_modules/tinypool/dist/esm/index.js:717:38)
    at file:///N:/_dev/amogus/webapp/node_modules/vitest/dist/create-c989e565.js:8442:20       
    at Array.map (<anonymous>)
    at Object.runTests (file:///N:/_dev/amogus/webapp/node_modules/vitest/dist/create-c989e565.js:8434:31)
    at file:///N:/_dev/amogus/webapp/node_modules/vitest/dist/create-c989e565.js:8767:23       
    at Vitest.runFiles (file:///N:/_dev/amogus/webapp/node_modules/vitest/dist/create-c989e565.js:8771:7)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Vitest.start (file:///N:/_dev/amogus/webapp/node_modules/vitest/dist/create-c989e565.js:8718:5)
error Command failed with exit code 1.

I know that the console option exists because it's noted down in the code right here, and if it's truthy it should actually be used a bit differently.

https://github.com/vitest-dev/vitest/blob/main/packages/vitest/src/integrations/env/jsdom.ts

How can I prevent my console from being spammed by CSS injection every time I run my tests in a jsdom env?

Last tested on Vitest v0.6.0

[Flixbox]

A wonderfully simple solution for y'all.

    const ignoredMessages = ['Could not parse CSS stylesheet']

    vi.spyOn(console, 'error').mockImplementation(message => {
        if (ignoredMessages.some(v => message.includes(v))) {
            return
        }
        console.info(message)
    })