Skip to content
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

toHaveStyles always report hover style #594

Open
thany opened this issue Mar 25, 2024 · 7 comments
Open

toHaveStyles always report hover style #594

thany opened this issue Mar 25, 2024 · 7 comments
Labels
jsdom Issue with JSDOM environment

Comments

@thany
Copy link

thany commented Mar 25, 2024

  • @testing-library/jest-dom version: 6.4.2
  • node version: 20.11.1
  • vitest version: 1.4.0
  • npm version: 10.5.0

Relevant code or config:

render(<Button kind="primary" />);
const button = screen.getByRole('button');
expect(button).toHaveStyles({ 'background-color': '#5FA00C' });

What you did:

The above code should render a button with background-color: #5FA00C and it absolutely does. In a real browser I can see that it has the correct colour.

What happened:

In the unittest, it errors out, telling me that its background colour is rgb(62, 136, 0) instead. This is incorrect. This colour happens to be the hover color. I am not simulating a hover anywhere. So why is it testing for that?

Reproduction:

Forked Codesandbox
Although it no longer shows the tests tab, so I have no clue if this actually reproduces the problem. It appears codesandbox made a whoopsie. Sorry, nothing I can do about it.

Problem description:

I seem to be facing the opposite of issue 59 where it ignores hover styles. It always tests for hover styles now, no matter what (seemingly).

Suggested solution:

Don't do a hover on element to test toHaveStyle for, or something. Just ignore the hover styles.

@Myky8
Copy link

Myky8 commented Apr 2, 2024

I have the same problem!!

  • "@testing-library/jest-dom": "6.4.2",
  • "@testing-library/react": "14.2.2",
  • "@testing-library/user-event": "14.5.2",

@oskar-wilczynski-ynd
Copy link

oskar-wilczynski-ynd commented Apr 2, 2024

I have the same issue on "@testing-library/jest-dom": "^5.16.1", one solution I found is using a similar method from jest-styled-components called toHaveStyleRule -- works like a charm.

Unfortunately, I guess it works only for styled-components...

@Myky8
Copy link

Myky8 commented Apr 2, 2024

I found that is caused by "getComputedStyle" of JSDOM.

jsdom/jsdom#3607

@mxgit1090
Copy link

mxgit1090 commented Apr 8, 2024

I found that is caused by "getComputedStyle" of JSDOM.

jsdom/jsdom#3607

I have been waiting for the fix for nearly a half year ...

@sangquangnguyen
Copy link

sangquangnguyen commented Apr 19, 2024

I found that is caused by "getComputedStyle" of JSDOM.
jsdom/jsdom#3607

I have been waiting for the fix for nearly a half year ...

You could use patch-package first to patch the fix here, no need to wait for nwsapi and jest to release it

@thany
Copy link
Author

thany commented Apr 19, 2024

You could use patch-package first to patch the fix here, no need to wait for nwsapi and jest to release it

For end-user projects paid for by a commercial customer, in my experience, this will create headaches and tech debt in the future - for yourself if the customer is lucky, but web development companies usually enjoy some amount staff turnover.

If a project maintainer is on top of things all the time, and it's a product of love and whatnot, this is okay advice, and perfectly fine to implement in any downstream project or package. So patch-package is a great solution if the jest-dom people would implement it on their end instead 🙏🏻

@MatanBobi MatanBobi added the jsdom Issue with JSDOM environment label May 4, 2024
@Waley-Z
Copy link

Waley-Z commented Jun 14, 2024

This issue seems to be caused by a bug (dperini/nwsapi#115) in nwsapi 2.2.10. It will work if I use 2.2.9. Try:

"overrides": {
    "nwsapi": "2.2.9"
}

update: the bug was still not fixed in nwsapi 2.2.12. (dperini/nwsapi#119)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
jsdom Issue with JSDOM environment
Projects
None yet
Development

No branches or pull requests

7 participants