toHaveStyle false positive with 8 digit hex

[cassiourugit]

Hi, me and @matheusliraofficial are having some issues when using toHaveStyle to assert colors with opacity. The tests are giving a false positive

Here's a sample of my problem:

If I do it like this:
expect(menuItem).toHaveStyle({ backgroundColor: '#ffffff' });

The test fails like expected, because the white I'm validating has 16% opacity

If I do it like this:
expect(menuItem).toHaveStyle({ backgroundColor: '#ffffff29' });

The test passes, but it's a false positive, no matter the number it put on the opacity, it always passes

If I try with RGBA instead of hex:
expect(menuItem).toHaveStyle({ backgroundColor: 'rgba(255, 255, 255, 0.16)' });

The test always fails, even with the correct color and opacity

Someone knows how to make opacity assertions work with toHaveStyle?

[gnapse]

This is most likely an issue with jsdom's lack of proper support for all CSS features in its getComputedStyle functionality. jest-dom relies on this functionality. For context, see #350, #392, #322 and #280 (and there may be more).

I honestly do not have much time to fully dig into these issues. But I'm more than happy to help if someone digs enough to find more concrete actional steps to be taken.

[cassiourugit]

What fixed this to me was changing the
jest-environment-jsdom-fourteen
to
"jest-environment-jsdom": "^26.6.2",

[gnapse]

That's great to know, @cassiourugit!