toHaveStyles doesn't work with a CSS variable

[thany]

• @testing-library/jest-dom version: 6.6.2
• node version: 20.18.0
• vitest version: 2.1.3
• npm version: 10.9.0

Relevant code or config:

render(<Button color="primary" />);
const button = screen.getByRole('button');
expect(button).toHaveStyle({ 'background-color': '#3E8800' });

Button is an MUI Button, but it doesn't matter, as the repro will show.

What you did:

The button background is declared in CSS with a variable.

What happened:

The unittest claims the background color as being ButtonFace rather than literally anything sensible.

Reproduction:

https://codesandbox.io/p/sandbox/5z6x4r7n0p (edit: whoops)
https://codesandbox.io/p/sandbox/react-testing-library-demo-forked-kkn5xt

Problem description:

The toHaveStyles assertion is not parsing CSS variables correctly, or at all. It seems to work with sort of a user agent default or something. CSS variables cause similar issues when used on (and testing for) other CSS properties.

Suggested solution:

I don't know if this is related to years-old issues about toHaveStyle and css variables, so it's possible the problem is just returned from the dead and back with revenge (maybe a bit less dramatic), or this is a totally new issue.

The point is, a CSS var should be parsed and resolved, so a unittest can test for the value that would be visible. I'm not sure if this is a helpful suggestion though, because it seems quite obvious, but perhaps CSS vars were never a consideration in the first place.

[jeremy-davis-sonarsource]

Hi thany, I think the reproducer link isn't correct:

hello.js

export default ({ name }) => <h1>Hello {name}!</h1>;

tests/hello.js

test('React Testing Library works!', () => {
  const {getByText} = render(<Hello name="Jill" />)
  expect(getByText(/hello jill/i)).toBeInTheDocument()
})

[thany]

I think this is it:
https://codesandbox.io/p/sandbox/react-testing-library-demo-forked-kkn5xt

The share button in codesandbox doesn't work properly 😑

In the mean time, were you not able to reproduce the problem going off my description?

[jeremy-davis-sonarsource]

That link works!
I haven't tried to be honest, I'm not a contributor 😅
I have a similar problem and I wanted to check if it's the same. I believe it's not: in my case, the test passes with any value.

Guess I'll create my own issue...

[thany]

I haven't tried to be honest, I'm not a contributor 😅

Sorry, I guess I was making assumptions 😀

Anyway thanks for noticing my original mistake.

[mycarrysun]

We're experiencing the same issue - and even worse when we use a css var to assert on something, it passes, giving us false confidence that it does have that style.

[michaelfaith]

In jest 30 and jsdom 26, this is actually causing test failures now, instead of just not evaluating. With the exact same var() function applied, expectation and actuals are resolving to different styles.

[Stanzilla]

@gnapse any chance this could be looked at?