Jest preset overide

[cdskill]

Current Behavior

I'm facing a lot of issues concerning Jest when it tries to parse CSS. This is what I have:

Error: Could not parse CSS stylesheet.

After spending a lot of time digging into what's happening, I found that people suggest modifying the virtual console to skip the error. https://stackoverflow.com/questions/69906136/console-error-error-could-not-parse-css-stylesheet

First attempt:

jest.preset.js

const nxPreset = require('@nx/jest/preset').default;
const jsdom = require('jsdom');
const { JSDOM } = jsdom;
const virtualConsole = new jsdom.VirtualConsole();
virtualConsole.on('error', () => {
  // No-op to skip console errors.
});
const dom = new JSDOM(``, { virtualConsole });

module.exports = {
  ...nxPreset,
  testEnvironment: dom,
};

I failed.
Then I've found a solution to replace the jsDom by @happy-dom/jest-environment (thymikee/jest-preset-angular#2194)

jest.preset.js

const nxPreset = require('@nx/jest/preset').default;

module.exports = {
  ...nxPreset,
  testEnvironment: '@happy-dom/jest-environment',
  moduleNameMapper: {
    // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
    // https://stackoverflow.com/questions/73203367/jest-syntaxerror-unexpected-token-export-with-uuid-library
    'uuid': require.resolve('uuid'),
  },
};

It works! I don't have any messages concerning "cannot parse any CSS stuff" anymore. But is this the right way to fix it?

Expected Behavior

Keep the jsDom in place as NX does and silent the virtualConsole error.

GitHub Repo

No response

Steps to Reproduce

1.you can for 'e.g' install primeng for as ui library
2. then follow the install guide by import their theme
3. develop a dummy page with one component then test

Nx Report

Node   : 20.10.0
   OS     : linux-x64
   npm    : 10.2.3
   
   nx                 : 16.7.4
   @nx/js             : 16.7.4
   @nx/jest           : 16.7.4
   @nx/linter         : 16.7.4
   @nx/workspace      : 16.7.4
   @nx/angular        : 16.7.4
   @nx/cypress        : 16.7.4
   @nx/devkit         : 16.7.4
   @nx/eslint-plugin  : 16.7.4
   @nx/storybook      : 16.7.4
   @nrwl/tao          : 16.7.4
   @nx/web            : 16.7.4
   @nx/webpack        : 16.7.4
   typescript         : 5.1.6
   ---------------------------------------
   Community plugins:
   @compodoc/compodoc               : 1.1.23
   @fortawesome/angular-fontawesome : 0.13.0
   @storybook/angular               : 7.4.0
   ng-mocks                         : 14.12.1
   ngxtension                       : 1.12.0

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[leosvelperez]

Thanks for reporting this!

This is an issue from Jest specifically and not caused by Nx. The Nx preset returns a plain JavaScript object, so you can override it the way you're doing it. The issue here is that Jest internally instantiates the VirtualConsole, so providing it like you're trying to do doesn't work.

To achieve what you need, you can:

• stub out the console.error function
• create a custom environment that extends JSDOMEnvironment

Stub out console.error

Stub the console.error in each project test-setup.ts file:

...
// No-op to skip console.errors
global.console.error = jest.fn();

Or:

...
global.console.error = () => {
  // No-op to skip console errors
};

Create a custom environment that extends JSDOMEnvironment

Create a custom-jest-environment.js file:

const JSDOMEnvironment = require('jest-environment-jsdom').TestEnvironment;

class CustomEnvironment extends JSDOMEnvironment {
  constructor(config, context) {
    context.console.error = () => {
      // No-op to skip console errors
    };

    super(config, context);
  }
}

module.exports = CustomEnvironment;

And provide it in your jest.preset.js:

const nxPreset = require('@nx/jest/preset').default;
const { join } = require('path');

module.exports = {
  ...nxPreset,
  testEnvironment: join(__dirname, 'custom-jest-environment.js'),
};

Please note that fully stubbing the console.error function can hide legit errors you might want logged out, so it's better to exclude specific errors you want to exclude.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.