testing-library / jest-dom

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:

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:

jest-dom/src/to-have-style.js

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().

Thanks for reporting this bug.

BTW, would you be open to contribute to fix it yourself?

Yes, sure!

There we go: #552

:tada: This issue has been resolved in version 6.1.5 :tada:

The release is available on:

Your semantic-release bot 📦🚀

	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')
	})

toHaveStyle fails on custom property names containing uppercase letters

Relevant code or config: