Open Trolejbus opened 8 months ago
This bug is also reported for primeng team: https://github.com/primefaces/primeng/issues/14085
Bump. Have been seeing this in my workspace and trying to get to the bottom of it
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
I wonder if it's possible to parse CSS before JSDOM processes it. That might solve the issue
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
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!
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.
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());
put this in
setup-jest.ts
This 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.
put this in
setup-jest.ts
This 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
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