-
Notifications
You must be signed in to change notification settings - Fork 412
Closed
Labels
bugSomething isn't workingSomething isn't workinggood first issueGood for newcomersGood for newcomersreleased
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="--color: blue">Hello World</span> | |
`) | |
expect(queryByTestId('color-example')).toHaveStyle('--color: blue') | |
}) | |
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
computedStyle.getPropertyValue(prop.toLowerCase()) === value, |
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()
.
gnapse
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't workinggood first issueGood for newcomersGood for newcomersreleased