"Could not parse CSS stylesheet" when running tests with jest

[angelo-v]

Describe the bug

After upgrading primeng 16.3.1 to 16.7.2 our jest tests fail with the following error:

Error: Could not parse CSS stylesheet
    at exports.createStylesheet (...node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:34:21)
    at HTMLStyleElementImpl._updateAStyleBlock (...node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
    at HTMLStyleElementImpl._attach (...node_modules/jest-environment-jsdom/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:19:12)
[...]
detail: '@layer primeng{.p-datatable{position:relative}.p-datatable>.p-datatable-wrapper{overflow:auto}.p-datatable-table{border-spacing:0px;width:100%}.p-datatable .p-sortable-column{cursor:pointer;-web
[...]

These problems seem to start with version 16.4.0 and to be caused by the introduction of CSS layers.

Environment

Angular app using nx workspace

Reproducer

No response

Angular version

16.2.9

PrimeNG version

16.7.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.4.0

Browser(s)

No response

Steps to reproduce the behavior

1. Install primeng 16.7.2
2. npm run test

Expected behavior

Jest tests should still pass.

[ljeanner]

Same issue after migrating to 16.7, the proposed solution doesn't work

[dodesheide]

Same issue for us.
Suppressing errors as suggested here doesn't seem like a good solution to me.

[vanamaa]

Is this issue fixed? I am still seeing this issue. I am using Angular 17/Jest 27.9.0/PrimeNg17.2.0 /JSDOM 27.9.0

[Elias-Graf]

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:

[cdskill]

facing the same issue here:

 detail: '@layer primeng{.p-autocomplete{display:inline-flex;position:relative}.p-autocomplete-loader{position:absolute;top:50%;margin-top:-.5rem}.p-autocomplete-dd .p-autocomplete-input{flex:1 1 auto;width:1%}.p-autocomplete-dd .p-autocomplete-input,.p-autocomplete-dd .p-autocomplete-multiple-container{border-top-right-radius:0;border-bottom-right-radius:0}.p-autocomplete-dd .p-autocomplete-dropdown{border-top-left-radius:0;border-bottom-left-radius:0}.p-autocomplete-panel{overflow:auto}.p-autocomplete-items{margin:0;padding:0;list-style-type:none}.p-autocomplete-item{cursor:pointer;white-space:nowrap;position:relative;overflow:hidden}.p-autocomplete-multiple-container{margin:0;padding:0;list-style-type:none;cursor:text;overflow:hidden;display:flex;align-items:center;flex-wrap:wrap}.p-autocomplete-token{width:-moz-fit-content;width:fit-content;cursor:default;display:inline-flex;align-items:center;flex:0 0 auto}.p-autocomplete-token-icon{display:flex;cursor:pointer}.p-autocomplete-input-token{flex:1 1 auto;display:inline-flex}.p-autocomplete-input-token input{border:0 none;outline:0 none;background-color:transparent;margin:0;padding:0;box-shadow:none;border-radius:0;width:100%}.p-fluid .p-autocomplete{display:flex}.p-fluid .p-autocomplete-dd .p-autocomplete-input{width:1%}.p-autocomplete-clear-icon{position:absolute;top:50%;margin-top:-.5rem;cursor:pointer}.p-autocomplete-clearable{position:relative}}\n',
               type: 'css parsing'
             }

[jarekcimoch]

Same issue, any idea how to solve it?

[colfin-96]

I'm afraid I'm also facing the same issue. Also, the workaround described in https://github.com/jsdom/jsdom/issues/2177 doesn't work for me for some reason.

[cdskill]

I just post a message in their Discord channel, i hope someone will take it in charge ...

[fbgrigolo]

I'm facing the same issue but in react

[CodeBast4rd]

We encountered a similar issue in our Angular project, which stemmed from the problem outlined here.

After attempting to integrate vitetest with analogjs as a Jest alternative, based on the suggestion here—which didn't resolve our issue—we found success with the following steps:

1. Install Happy DOM for a more efficient testing environment:
   • npm install --save-dev happy-dom
   • npm install --save-dev @happy-dom/jest-environment
2. Update jest.config.ts to use Happy DOM:

   {
    "testEnvironment": "@happy-dom/jest-environment"
   }

For more configuration details, refer to the Happy DOM readme here.

[Panossa]

We had the same problem in our Angular application and the source of it was as described here.

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:

1. npm install --save-dev happy-dom
2. 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 literally did not change a thing for me. To be fair, I haven't had a jest.config.ts or jest.config.js in the first place until today so I'm not sure whether it's being read correctly. Here's my jest.config.js file:

module.exports = {
  collectCoverageFrom: ['src/*/**', '!src/assets/**/*.json', '!src/environments/*', '!src/**/*.mock.*'],
  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
  testEnvironment: '@happy-dom/jest-environment'
};

I don't know whether I put testEnvironment in the right place but I'm quite sure it's correct there. The file itself is definitely loaded when I type "ng test" because if I include a syntax error, it'll show that when I run jest. But the error message is the same anyway. (The one wih @layer in the primeng CSS code)

[CodeBast4rd]

@Panossa

Did you install both packages. Did you try to run jest with the setting passed over the environment to make sure that the syntax error are not from the linter or another tooling?

npx jest --env=@happy-dom/jest-environment

[Panossa]

@Panossa

Did you install both packages. Did you try to run jest with the setting passed over the environment to make sure that the syntax error are not from the linter or another tooling?

npx jest --env=@happy-dom/jest-environment

I installed both. And they are both in my package.json file under devDependencies. Not sure if it actually tries to use happy-dom but I mentioned it in the jestConfig, like I said.

Running the command you just mentioned creates different errors. It seems jest can not parse any test files at all with it. My test starts with some imports and running the npx jest command from above procudes the following error:

Jest encountered an unexpected token 

[...]

 C:\[censored]\src\app\app.component.spec.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { TestBed } from '@angular/core/testing';

with ^^^^^^ marking the word "import".

I know Jest itself is only able to run JS code, no TypeScript because of features like import and export. This is why there are transpilers like Babel or the one Angular provides itself nowadays. This is also how I could run the tests before even trying out happy-dom. But then I get the CSS errors.

(My tests are successful nonetheless but that will probably change when I start to test for something related to the CSS of an element)