Open
Description
@testing-library/jest-dom
version: 6.3.0node
version: 20.9.0jest
version: 27.5.1 (from create react app)npm
version: 10.1.0
Relevant code or config:
function App() {
return <div style={{ aspectRatio: "1 / 1" }}>Hello</div>;
}
it("should have an aspect-ratio", () => {
render(<App />);
const app = screen.getByText("Hello");
expect(app).toHaveStyle({ "aspect-ratio": "1 / 1" });
expect(app).toHaveStyle({ aspectRatio: "1 / 1" });
});
What you did:
npm test
What happened:
✕ should have an aspect-ratio (47 ms)
● <App> › should have an aspect-ratio
expect(element).toHaveStyle()
- Expected
- aspect-ratio: 1 / 1;
11 | - Expected
12 | - aspect-ratio: 1 / 1; */
> 13 | expect(app).toHaveStyle({ "aspect-ratio": "1 / 1" });
| ^
14 | expect(app).toHaveStyle({ aspectRatio: "1 / 1" });
15 | });
16 |
at Object.<anonymous> (src/App.test.js:13:17)
A worker process has failed to exit gracefully and has been force exited. This is likely caused by tests leaking due to improper teardown. Try running with --detectOpenHandles to find leaks. Active timers can also cause this, ensure that .unref() was called on them.
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
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 that
I'm not sure what defaultView
is here
const {getComputedStyle} = htmlElement.ownerDocument.defaultView