Closed
Description
The error will be the dreaded Compared values have no visual difference.
Relevant code or config:
It's easy to reproduce by changing the existing test:
jest-dom/src/__tests__/to-have-style.js
Lines 122 to 128 in 4ae0231
test('handles inline custom properties', () => {
const {queryByTestId} = render(`
<span data-testid="color-example" style="--backgroundColor: blue">Hello World</span>
`)
expect(queryByTestId('color-example')).toHaveStyle('--backgroundColor: blue') // this will fail
})
The culprit is the .toLowerCase()
here:
Line 23 in 4ae0231
According to MDN:
Note: Custom property names are case sensitive —
--my-color
will be treated as a separate custom property to--My-color
.
Current workarounds are changing the code under test, including the stylesheets, to use all-lowercase custom property names, or to not use .toHaveStyle()
.