Trolejbus
commented
10 months ago This bug is also reported for primeng team: https://github.com/primefaces/primeng/issues/14085
Open Trolejbus opened 11 months ago
Trolejbus
commented
10 months ago This bug is also reported for primeng team: https://github.com/primefaces/primeng/issues/14085
NathanLaing
commented
10 months ago Bump. Have been seeing this in my workspace and trying to get to the bottom of it
Elias-Graf
commented
10 months ago The Problem seems to be the CSS parser "cssom" that jsdom uses. I does not support @layer.
https://github.com/NV/CSSOM/issues/109#issuecomment-1398336817 https://github.com/jsdom/jsdom/issues/2026
Here is one of the pieces of code that fails for me:
This is a copy of the comment on the PrimeNG issue: https://github.com/primefaces/primeng/issues/14085#issuecomment-1888629612
ahnpnl
commented
10 months ago I wonder if it's possible to parse CSS before JSDOM processes it. That might solve the issue
CodeBast4rd
commented
9 months ago We had the same problem in our Angular application and the source of it was as described https://github.com/primefaces/primeng/issues/14085#issuecomment-1888629612.
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: https://github.com/primefaces/primeng/issues/14085#issuecomment-1941347163
AnnaVidal
commented
7 months ago 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!
pi-nathan
commented
6 months ago 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.
abhijit-chikane
commented
5 months ago 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());
jonelleamio
commented
5 months ago put this in
setup-jest.tsThis should fix the issuelet 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
commented
5 months ago put this in
setup-jest.tsThis should fix the issuelet 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
commented
5 months ago 
sshelake25
commented
1 month ago Do we have solution for this problem ?
ahnpnl
commented
1 month ago @sshelake25 one of workarounds is this one https://github.com/thymikee/jest-preset-angular/issues/2194#issuecomment-1941351327
Version
13.1.4
Steps to reproduce
Steps which I made to prepare repo:
Expected behavior
Should work without any errors
Actual behavior
Error is shown in console:
Additional context
In one of v16 releases PrimeNg has used @layer at-rule inside their css stylesheets. It looks like jsdom for some reason cannot parse css, which contains @layer {} at-rule - I found this issue reported: https://github.com/jsdom/jsdom/issues/2177.
Adding some trick to stub console.error to not show this error works, since it is not preventing tests from pass.
Environment