toHaveStyle stopped working after upgrade from v3 to v4

[sashberd]

After upgrade from v3 to v4 toHaveStyle unexpected stopped working to me for CS custom properties:

expect(screen.getByTestId(dataTestId.filesDropzoneBorderContainer)).toHaveStyle({ cursor: 'pointer' }) //working
    expect(screen.getByTestId(dataTestId.filesDropzoneIconContainer)).toHaveStyle({
      border: 'var(--border-width-lg) solid var(--color-brand-base)',
    }) //not working

For the working example it returns the styles and for the not working it always return empty recieved
My CSS looks like:

export const StyledUploadIconContainer = styled.div<{ $isFileLimitExceeded: boolean }>`
  height: var(--spacing-400);
  width: var(--spacing-400);
  margin-top: var(--spacing-125);
  border: var(--border-width-lg) solid
    ${({ $isFileLimitExceeded }) =>
      $isFileLimitExceeded ? 'var(--color-neutral-darkest)' : 'var(--color-brand-base)'};
  border-radius: var(--border-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
`

Anyone had same issue and found the cause or workaround?

"@types/jsdom": "^27.0.0",
"jsdom": "^27.3.0",
"vitest": "^4.0.15"

[AriPerkkio]

As you've mentioned jsdom, are you using toHaveStyle via jest-dom? This might be related to testing-library/jest-dom#673.

Or are you using Vitest's browser mode's toHaveStyle?

[sashberd]

I am using jest-dom, but I did not updates jest-dom in my project
It looks like v4 has an issue with latest jsdom library updates