Unit test css variables values with Jest and Angular

So, it is said that Angular is migrating the unit tests from jasmine and karma and going to Jest.

I do my unit tests with Jest now and it looks good, except when it comes in unit testing css variables or anything related with css

What i dιd with jasmine and karma was:

it('UnitTest - should apply the correct colors and fonts', () => {
// Assert
const styles = window.getComputedStyle(fixture.nativeElement);
expect(styles.getPropertyValue('--light-bg')).toBe('#efefef50');
...
});


how can i do something equivelant with jest?

I did not find anything relevant by searching arround, only posts like this one, or that one but to be honest i don't fully get them.

this is the console.log(styles)

CSSStyleDeclaration {
'0': 'display',
'1': 'visibility',
_values: { display: 'block', visibility: 'visible' },
_importants: { display: '', visibility: undefined },
_length: 2,
_onChange: [Function (anonymous)]
}


something similar is asked here

Continue reading...