Skip to content

toHaveStyle fails on custom property names containing uppercase letters #551

Closed
@depoulo

Description

@depoulo

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:

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:

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions