Skip to content

.toHaveStyle() doesn't know about aspect-ratio #570

Open
@Fullchee

Description

@Fullchee
  • @testing-library/jest-dom version: 6.3.0
  • node version: 20.9.0
  • jest 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinggood first issueGood for newcomers

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions