Skip to content

toHaveStyle Color not working as expected #350

Open
@espipj

Description

@espipj
  • dom-testing-library version: 5.11.9
  • react-testing-library version: 11.2.5

Relevant code or config:

Edit Material demo (forked)

Problem Statement:

I was trying to test the styling of some components (applied via Material UI styling solution) and it seems that toHaveStyledoesn't work properly. The component style is computed/rendered properly in the web dom, the TabeHead cells styles show up as:

color: #fff;
background-color: #000;

But when using Testing library...

  expect(screen.getByText("Calories")).toHaveStyle(`color: #FFF`);

It throws the following error: Expected - color: rgb(255, 255, 255); + color: rgba(0, 0, 0, 0.87);
rgba(0, 0, 0, 0.87) is doesn't match with hex #FFF

At the same time this weirdly works with background-color.
Please check the code sandbox for more context, if you need further explanation let me know and Im happy to help 😃

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions