toHaveStyle ignores hover styles

[davidcai]

Describe the feature you'd like:

I have a button that displays different styles when mouse moves over it:

background-color: green;
&:hover {
  background-color: red;
}

Here is my test:

fireEvent.mouseOver(button);
expect(button).toHaveStyle(`
  background-color: red;
`);

However, the test complained that the background color is still green instead of red.
I tried fireEvent.mouseEnter before calling mouseOver. Didn't make any difference.

I don't think it is fireEvent.mouseOver's problem. A onMouseOver event listener actually gets called when a mouseOver event is fired by fireEvent. Could it be a bug in jest-dom?

Describe alternatives you've considered:

So far, I commented out all test that verify hover styles. And I probably should leave this style test to visual/browser test?

[gnapse]

This is similar to #53, and I suspect that dom-testing-library's fireEvent merely takes care of calling the event handlers registered, but it does not have all the other real-life effects on the elements. I'm in the process of confirming this, and may open a ticket in dom-testing-library about this issue. Because if confirmed, this is something jest-dom cannot take care of, AFAICT.

[kentcdodds]

I honestly don't think there's anything that dom-testing-library could reasonably do for this. I don't know if dispatching these events via JavaScript APIs in the browser would actually update the CSS applied. That'd be the first thing to check.

[gnapse]

Yes, I think the same. It was not my intention to suggest that dom-testing-library should fix this. My point @davidcai is that fireEvent.mouseOver is not actually performing the changes in the dom that you're expecting it to.

[gnapse]

This issue seems to be out of the scope of jest-dom, so I'm closing it. It can always be re-open if someone suggests an actionable path forward.

[muthuramakrishnan]

It seems this issue isn't resolved with userEvent as well.
Here's the sandbox link: https://codesandbox.io/s/vibrant-hertz-qc128p?file=/src/App.test.js

userEvent.hover is triggering a hover action. But it looks like toHaveStyle is failing.

As mentioned in the original issue, the test complained that the background color is still green instead of red.

version details
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^14.4.3",

[norayr93]

I am encountering the same issue.Any updates on that ?

[theKashey]

This is a limitation of a library below JSDOM - nwsapi the one responsible for CSS.

Long story short - the :hover selector will not be evaluated if document "currently" doesn't have any focused element, and later engine will use doc.hoverElement to understand which element is hovered, but such properly just does not exist.

[diana96alazzam]

@theKashey Do you mean that it is impossible to test this scenario (where we have a component that has a div and a hidden button, when the user hover over the div, the button shows). I can test this scenario if I use onMouseOver and onMouseOut but I don't want the component state to change on each hover/un-hover. This is why I used :hover selector instead, but it is breaking my tests and I'm not sure if it is possible to keep same tests or not.

[theKashey]

Try bumping nwsapi, the library responsible for this functionality - just remove the corresponding record from your lock file and install dependencies back. AFAIK the fix has been introduced back in May

[diana96alazzam]

@theKashey

Thanks for your reply!

I tried updating nwsapi to the latest version, but I'm still facing the same issue.
Can you help me and check if I'm doing something incorrectly? Code sandbox