jest-dom: haveStyle does not work with linear-gradient

@testing-library/jest-dom version: 4.2
npm version: 6.13.1

dom-testing-library version: 4.2.4
react-testing-library version: 9.3.2

Relevant code or config:

 expect(getByTestId('border')).toHaveStyle('background: linear-gradient(red 0%, red 49%, white 50%);'); // Checks the gradient color of the component.

What you did:

I wanted to test the gradient color applied like this: background: linear-gradient(red 0%, red 49%, white 50%);

What happened:

It always returns true if the expected value is a gradient. If one of them is e.g. a color, it fails as expected. It seems like the gradient string is just parsed into an empty string.

Reproduction:

Here is a sandbox.

If you change the expected value to something else than a gradient, it fails as expected, but lawys true, if it is a gradient.

Problem description:

A gradient in toHaveStyle always returns true.

About this issue

Original URL
State: open
Created 5 years ago
Comments: 19 (7 by maintainers)

Most upvoted comments

It seems to be an issue with JSDom I would say. https://github.com/jsdom/jsdom/issues/2166

Just setting the style property to a gradient leads to a style property with an empty string as value.

      const div = document.createElement('div');
      const gradient = 'linear-gradient(45deg, #fff, #000)';
      div.style.backgroundColor = gradient;
      expect(div.style.backgroundColor).toEqual(gradient);

I also tried different syntax and -webkit and -moz but no luck. It’s just not possible to set this property. Interesting though the css rule parser package used by jsdom (CSSOM) is understanding css rules having linear-gradient. It’s only not valid for style properties.

fragsalat on Oct 30, 2020

This seems to apply for any CSS function, and it doesn’t matter what value is asserted.

Here’s a sandbox with backgroundImage set to a radial gradient and a url.

I’ve set the assertion to toHaveStyle("background-color: xxx;"), and it still passes.

jacksteamdev on Dec 17, 2019

consider my comment “fixed” 😆

Do you mean then that this issue is now fixed/can-be-closed?

haha - only mine, sorry for hijacking 🙇

dennisroethig on Dec 6, 2019

So you’re saying the test code should be:

No, I was saying the opposite, that the color in the background-color line should not have quotes around it.

In the original test assertion you posted here above it had single quotes, and in your previous comment it has double quotes. But I think it shouldn’t have any.

gnapse on Dec 6, 2019