-
Notifications
You must be signed in to change notification settings - Fork 404
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()
doesn't know about aspect-ratio
#570
Comments
I did a quick debugging out of curiosity, since I've run into this in the past 😅 I have a gut feeling that this is not an issue in this library per se, but rather in the jsdom environment. Here is a reduced test case, creating the elements ad-hoc in the test. test('aspect-ratio style declaration', () => {
const el = document.createElement('div');
el.style.aspectRatio = '1 / 1';
el.style.width = '100%';
document.body.appendChild(el);
expect(el).toBeInTheDocument();
// Uncomment for testing
// console.log('Computed style', getComputedStyle(el));
// console.log('Attribute style', el.style);
// These pass
// Barebones assertion
expect(getComputedStyle(el).width).toEqual('100%');
// @testing-library/jest-dom
expect(el).toHaveStyle({ width: '100%' });
// These fail
// Barebones assertion
expect(getComputedStyle(el).aspectRatio).toEqual('1 / 1');
// @testing-library/jest-dom
expect(el).toHaveStyle({ aspectRatio: '1 / 1' });
}); The logs themselves point that I checked jsdom's issue tracker and did not find anything relevant. My tentative suggestion is to raise the issue there, but I might be wrong!
|
Thanks, @fpapado, for taking such a close look at this. I, too, suspect of jsdom. If only because the custom matcher does not do anything that is particular to this CSS property, but even more so because of your findings. |
It seems to be fixed in the latest versions of When I install jsdom v16 (the same version listed in the package.json dev dependencies), I can reproduce the issue When I install jsdom v24 (the latest), it doesn't have that issue. https://github.com/Fullchee/jsdom-stripping-aspect-ratio So the solution is to upgrade the Note that this is a breaking change where only Node 18+ is supported on the latest version of The version of |
I noticed that https://github.com/testing-library/jest-dom/releases/tag/v6.0.0 and the latest version of jsdom that supports Node v14 is v21 (v22 min Node version is v16)
Let me see if this gets fixed in jsdom v21 |
Yup! https://github.com/Fullchee/jsdom-stripping-aspect-ratio/tree/jsdom-v21-node-14 It looks it's fixed in v21! 🎉 Gonna create a PR! |
I'm stumped 😞 It looks like the aspect-ratio test fails in the PR where I upgrade to |
@testing-library/jest-dom
version: 6.3.0node
version: 20.9.0jest
version: 27.5.1 (from create react app)npm
version: 10.1.0Relevant code or config:
What you did:
npm test
What happened:
Reproduction:
https://github.com/Fullchee/jest-dom-to-have-style
Problem description:
It works for other CSS properties, like
color: blue
Suggested solution:
It looks like the dependency
@adobe/css-tools
can handle aspect-ratio so I don't think it's thatI'm not sure what
defaultView
is hereconst {getComputedStyle} = htmlElement.ownerDocument.defaultView
The text was updated successfully, but these errors were encountered: