You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
test('can assert against non-existing style in object notation',()=>{const{queryByTestId}=render(` <span data-testid="color-example" style="font-size: 12px">Hello World</span> `)expect(queryByTestId('color-example')).toHaveStyle({fontSize: 13,})})
Also, this test would also pass:
test('handles assertions against CSS which would parse as blank values',()=>{const{queryByTestId}=render(` <span data-testid="color-example">Hello World</span> `)expect(queryByTestId('color-example')).toHaveStyle(`background-image: zzz`)})
What happened:
It seems the isSubset() function is matching empty strings vs. empty strings — in the first case, because of CSS being in a plain object, in the second case, because parser wipes zzz and turns it into an empty string.
To fix the second test, it's enouch to add a quick check against a falsy value:
function isSubset(styles, computedStyle) {
return (
!!Object.keys(styles).length &&
Object.entries(styles).every(
([prop, value]) =>
+ value && (
computedStyle[prop] === value ||
computedStyle.getPropertyValue(prop.toLowerCase()) === value
+ ),
)
)
}
But this doesn't solve the first unit test, where we're asserting string with px against a plain object. It's not that trivial.
Reproduction:
Copy-paste the unit tests above into src/__tests__/to-have-style.js, on a fork of a current master branch.
Suggested solution:
isSubset() function needs hardening, as described above (at least, a check against value as an empty string)
@testing-library/jest-dom
version: current master branch, I guess 5.14.1node
version: v12.13.1npm
(oryarn
) version: 6.12.1Relevant code or config:
Just branch off the current
master
branch, let's add few unit tests.What you did:
There are some problems with assert
.toHaveStyle()
— the existing unit test yields false positiveshttps://github.com/testing-library/jest-dom/blob/main/src/__tests__/to-have-style.js#L203-L210
if you change it to
13
, it would still pass:Also, this test would also pass:
What happened:
It seems the
isSubset()
function is matching empty strings vs. empty strings — in the first case, because of CSS being in a plain object, in the second case, because parser wipeszzz
and turns it into an empty string.To fix the second test, it's enouch to add a quick check against a falsy
value
:But this doesn't solve the first unit test, where we're asserting string with
px
against a plain object. It's not that trivial.Reproduction:
Copy-paste the unit tests above into
src/__tests__/to-have-style.js
, on a fork of a currentmaster
branch.Suggested solution:
isSubset()
function needs hardening, as described above (at least, a check againstvalue
as an empty string)We have the failing unit tests, now it's just plain TDD.
The text was updated successfully, but these errors were encountered: