Test styles triggered by mouse over events

Question

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 green instead of red. I tried fireEvent.mouseEnter before calling mouseOver. Didn't make any difference. What did I miss?

Lariat

No solution, but question also asked here: spectrum.chat/thread/108403f4-915b-4243-974c-c41af826b91d – Pliske

mouseOver in react-testing-library is asynchronous, you need to wait for it. See #64787289 – Tarp

Answer 1

You need to wait for the event to be fired and the style to be applied. You can try

fireEvent.mouseOver(button);

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

Excisable

Answer 2

Maybe you can wrap it in act().

Sublapsarianism