TypeError: CSS.supports is not a function while running test

[duytran-orientsoftware]

I met this TypeError: CSS.supports is not a function when writing a test file for my feature using Codeflask

I also try to bypass this by using global.CSS, but it does not seem to work on my side.

import React from 'react';

import { render, screen } from '@testing-library/react';
import { setupServer } from 'msw/node';

import { defaultConfigurationProps } from '@applets/ImportManager/__helper__/ConfigurationDialogWrapper';
import { setMockAuthToken } from '@util/testhelpers/init';
import NewColumnDialog from '.';
import { setDocumentHeight } from '../../../../../../../config/jest/jestHelpers';
import { AGGREGRATE, LOGICAL, MATHEMATICAL } from './MenuOption';

global.CSS = { supports: jest.fn(), escape: jest.fn() }; // Add this to bypass the CSS.supports is not a function

const server = setupServer();

beforeAll(() => {
	setMockAuthToken();
	server.listen();
});
...etc

Do you guys know any way to resolve or at least bypass this? Thanks.

Version:

• React: 17.0.2
• Codeflask: 1.4.1
• Jest: 29.2.2
• @testing-library/react: 12.1.5
• @testing-library/jest-dom: 5.16.5

[Frozen-byte]

Same Problem for me, for a temporary workaround I added

Object.defineProperty(global.CSS, 'supports', {
    value: () => jest.fn()
});

to my jest setup file.

[stefanzmf]

Fixed the issue by switching from jsdom to happy-dom which seems to provide CSS.supports function. Based on the answer received in Highcharts community, this issue happens because:

Highcharts 12.x: We handed color parsing over to the browser and feature‑detect with CSS.supports (e.g., color-mix(), lab(), etc.).

Other possbile fixes (thx to Highcharts community):

• updating the jsdom (it didnt work with my current setup)
• Mock Highcharts color support checks in tests that don’t render
• Run a browser runner for integration tests