toHaveStyle failing for upper cased style rules in version 4.1.2

[ppiyush13]

@testing-library/jest-dom library version: 4.1.2

Consider the following div element:

<div id="simple" style="align-items:center">Simple Div</div>

I am using toHaveStyle to match CSS style rules as shown below

const div = document.querySelector("#simple");

expect(div).toHaveStyle('Align-items:center;');

Expected:
It should not throw error and proceed ahead

Actual:
It fails.

But below works fine

const div = document.querySelector("#simple");

expect(div).toHaveStyle('align-items:center;');

Seems that toHaveStyle needs CSS rules to be in lower case.
But this was working as expected in version 4.1.1

[ruhaise]

@ppiyush13 could you please try to put a codesandbox to reproduce this issue, im having some similar issue and i just wanted to confirm this

[ppiyush13]

@ruhaise
here is the codesandbox link https://codesandbox.io/s/jest-dom-issue-148-9lzc6

[connormeredith]

@ppiyush13 can you let me know if #154 fixes your issue?

[ppiyush13]

@connormeredith I looked at the pull request https://github.com/testing-library/jest-dom/pull/154/files . I think it should fix this issue

[gnapse]

I'll be approving the PR because I confirmed css selectors are not case sensitive (to my surprise). I just wonder why are you specifying them in your tests with capitalized names? 🤔

[gnapse]

🎉 This issue has been resolved in version 4.2.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ppiyush13]

@gnapse no specific reason for specifying CSS rules in upper case. I could have went ahead by making it lower case. I opened this issue because it was working fine till version 4.1.1