Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

toHaveStyle fails on custom property names containing uppercase letters #551

Closed
depoulo opened this issue Nov 28, 2023 · 4 comments · Fixed by #552
Closed

toHaveStyle fails on custom property names containing uppercase letters #551

depoulo opened this issue Nov 28, 2023 · 4 comments · Fixed by #552
Labels
bug Something isn't working good first issue Good for newcomers released

Comments

@depoulo
Copy link
Contributor

depoulo commented Nov 28, 2023

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

@gnapse gnapse added bug Something isn't working good first issue Good for newcomers labels Nov 28, 2023
@gnapse
Copy link
Member

gnapse commented Nov 28, 2023

Thanks for reporting this bug.

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

@depoulo
Copy link
Contributor Author

depoulo commented Nov 28, 2023

Yes, sure!

depoulo added a commit to depoulo/jest-dom that referenced this issue Nov 28, 2023
CSS custom properties are case sensitive

fixes testing-library#551

---


this commit adds a failing test, the following one makes it pass

please squash them together
@depoulo
Copy link
Contributor Author

depoulo commented Nov 28, 2023

There we go: #552

Copy link

🎉 This issue has been resolved in version 6.1.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good first issue Good for newcomers released
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants