[Bug]: Could not parse CSS stylesheet about jest-preset-angular

[CodeBast4rd]

We had the same problem in our Angular application and the source of it was as described primefaces/primeng#14085 (comment).

Our solution after trying out unsuccessfully vitetest integrating over analogjs as a replacement for jest, as suggested here, we resolved our issue with the following solution:

npm install --save-dev happy-dom
npm install --save-dev @happy-dom/jest-environment
And configuring the jest.config.ts with the following property:
{ "testEnvironment": "@happy-dom/jest-environment" }

For alternative configurations one can checkout the readme here.

This is a copy of the comment on the PrimeNG issue: primefaces/primeng#14085 (comment)

[AnnaVidal]

We had the same problem in our Angular application and the source of it was as described primefaces/primeng#14085 (comment).

Our solution after trying out unsuccessfully vitetest integrating over analogjs as a replacement for jest, as suggested here, we resolved our issue with the following solution:

npm install --save-dev happy-dom npm install --save-dev @happy-dom/jest-environment And configuring the jest.config.ts with the following property: { "testEnvironment": "@happy-dom/jest-environment" }

For alternative configurations one can checkout the readme here.

This is a copy of the comment on the PrimeNG issue: primefaces/primeng#14085 (comment)

I was having the same issue using Primereact + Nextjs and this solution works, thank you!

[abhijit-chikane]

put this in setup-jest.ts
This should fix the issue

let consoleSpy: jest.SpyInstance;
beforeAll(() => {
    consoleSpy = jest.spyOn(global.console, 'error').mockImplementation((message) => {
        if (!message?.message?.includes('Could not parse CSS stylesheet')) {
            global.console.warn(message);
        }
    })
});

afterAll(() => consoleSpy.mockRestore());

[Trolejbus]

This bug is also reported for primeng team: primefaces/primeng#14085

[NathanLaing]

Bump. Have been seeing this in my workspace and trying to get to the bottom of it

[Elias-Graf]

The Problem seems to be the CSS parser "cssom" that jsdom uses. I does not support @layer.

NV/CSSOM#109 (comment)
jsdom/jsdom#2026

Here is one of the pieces of code that fails for me:

This is a copy of the comment on the PrimeNG issue: primefaces/primeng#14085 (comment)

[ahnpnl]

I wonder if it's possible to parse CSS before JSDOM processes it. That might solve the issue

[pi-nathan]

Switching to an alternative test environment (happy-dom, in this case as suggested above) solved this for me. Test execution speed seems similar, nothing has broken. Only thing I'd like now is to make jsdom a peer dependency rather than a dependency of this package so we can choose to opt out of it.

[jonelleamio]

put this in setup-jest.ts This should fix the issue

let consoleSpy: jest.SpyInstance;
beforeAll(() => {
    consoleSpy = jest.spyOn(global.console, 'error').mockImplementation((message) => {
        if (!message?.message?.includes('Could not parse CSS stylesheet')) {
            global.console.warn(message);
        }
    })
});

afterAll(() => consoleSpy.mockRestore());

it's not a fix, you're just hiding the problem.

[abhijit-chikane]

put this in setup-jest.ts This should fix the issue

let consoleSpy: jest.SpyInstance;
beforeAll(() => {
    consoleSpy = jest.spyOn(global.console, 'error').mockImplementation((message) => {
        if (!message?.message?.includes('Could not parse CSS stylesheet')) {
            global.console.warn(message);
        }
    })
});

afterAll(() => consoleSpy.mockRestore());

it's not a fix, you're just hiding the problem.

Well that’s what I wanted as I couldn’t find the one which will solve the issue easily
I have chose this approach as this is minimal and I don’t wanted my console to be flooded with these error msg

[fabb]

see jestjs/jest#15106