jsdom: 'Error: Could not parse CSS stylesheet' since 11.6.x

@jktravis I just added this to my test setup for now 😃

const _ = require('lodash')
const originalConsoleError = console.error
console.error = function(msg) {
  if(_.startsWith(msg, '[vuex] unknown')) return
  if(_.startsWith(msg, 'Error: Could not parse CSS stylesheet')) return
  originalConsoleError(msg)
}

My solution, based on @aphofstede workaround, considering that console.error could have many params, and some of them might not be strings:

const originalConsoleError = console.error;
const jsDomCssError = 'Error: Could not parse CSS stylesheet';
console.error = (...params) => {
  if (!params.find(p => p.toString().includes(jsDomCssError))) {
    originalConsoleError(...params);
  }
};

Getting same issue here too - still no resolution?

I also met this issue when trying to use Jest in newest Angular project. One of Angular most common UI library called PrimeNg has added @layer at-rule into their stylesheets. And it started to throw in Jest unit tests:

console.error Error: Could not parse CSS stylesheet at exports.createStylesheet (C:\sources\creditboard-new\CreditBoard\ClientApp\node_modules\jsdom\lib\jsdom\living\helpers\stylesheets.js:34:21) ... detail: '@layer primeng{p-inputnumber,.p-inputnumber{display:inline-flex}...

So far workaround with console.error replacement is working. To reproduce this issue you can clone: https://github.com/Trolejbus/jsdom-issue-in-jest Commands to run tests: npm install npm test

I’ve added this workaround to my setupTests.ts file which runs before every test run:

beforeAll(() => {
  const originalWarn = console.warn.bind(console.warn);
  console.warn = (msg) => !msg.toString().includes('Could not parse CSS stylesheet') && originalWarn(msg);
});

@aphofstede Did you work around the issue somehow? I have the same problem, and seemingly with the same library. I’m using Jest, though, and not sure how to handle this in that case.

@domenic I have this exact same issue, where my css gets dumped to my terminal when I’m running my AVA tests. I’d like to supress the jsdom errors as you’ve suggested, but I’m not exactly sure where the following code should go (I tried it in my index.test.js file but it’s not suppressing it):

`const jsdom = require(“jsdom”); const { JSDOM } = jsdom;

const virtualConsole = new jsdom.VirtualConsole(); const dom = new JSDOM(``, { virtualConsole });`

Any ideas on where this should go? Thanks

Unfortunately it looks like this is due to the stylesheet using (legitimate) features that our CSS parser does not support. Given jsdom’s current parser, this results in us throwing out the entire stylesheet, and giving you a warning in the console.

There’s not much you can do here. If you find this message unsightly, you can suppress it (and other similar messages) using the techniques at https://github.com/jsdom/jsdom#virtual-consoles (this is a "jsdomError"). The long-term fix is for us to get a better CSS parser, but that’s quite difficult.

I am also receiving similar error when running unit tests with Vite/Vitest