Jest-dom: toHaveStyle() doesn't behave as expected

[moroshko]

The following test fails with:

expect(element).toHaveStyle()

- Expected

- paddingLeft: ;

  12 |     />
  13 |   );
> 15 |   expect(screen.getByPlaceholderText("example")).toHaveStyle({
  16 |     paddingLeft: 4
  17 |   });
  18 | });

import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render, screen } from "@testing-library/react";

test("failing test", () => {
  render(
    <input
      placeholder="example"
      style={{
        paddingLeft: 4
      }}
    />
  );

  expect(screen.getByPlaceholderText("example")).toHaveStyle({
    paddingLeft: 4
  });
});

Am I using toHaveStyle() the wrong way, or is this a bug?

The error message is also pretty confusing 😕

CodeSandbox

• @testing-library/jest-dom version: 5.11.1
• node version: 12.6.0
• npm version: 6.14.6
• react-testing-library version: 10.4.7

[nersoh]

In your case, you're not setting the unit of measurement for padding-left. When you do paddingLeft: 4, it will be considered as 4px. So the assertion that works would be expect(screen.getByPlaceholderText("example")).toHaveStyle({ paddingLeft: '4px' });

[moroshko]

@nersoh Thanks, I didn't realize that units must be specified. Could the error message give that hint?

How about { paddingLeft: "calc(4px + 2ch)" }?

In 5.11.0, it failed with:

Compared values have no visual difference.

In 5.11.1, it fails with:

expect(element).toHaveStyle()

- Expected

- paddingLeft: ;

  12 |     />
  13 |   );
> 15 |   expect(screen.getByPlaceholderText("example")).toHaveStyle({
  16 |     paddingLeft: "calc(4px + 2ch)"
  17 |   });
  18 | });

CodeSandbox

[andy128k]

This is a regression in 5.11.1. Numbers were accepted and interpreted as px before this release.

[gnapse]

Seems another unwanted consequence of #276. We should've had tests for this feature of accepting numbers so that regressions wouldn't occur.

280 is another regression for which we also did not have tests. I may work on fixing both soon if no one beats me to it. For the moment you can fix your version to v5.11.0.

[nersoh]

Great catch, everyone. That's an opportunity to improve the tests 😃

[gnapse]

:tada: This issue has been resolved in version 5.11.3 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[andy128k]

@gnapse @luanraithz It still doesn't work for me :(

Example of failing test:

    test('position -9999px', () => {
      const {container} = render(`
        <input type='submit' style="position: absolute; left: -9999px;" />
      `)
      expect(container.querySelector('input')).toHaveStyle({
        position: 'absolute',
        left: -9999,
      })
    })

Failure

    - Expected

    - left: ;
    + left: -9999px;

[gnapse]

For reference to whoever lands here, the problem reported in the previous comment was opened as an issue (see #288).