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?

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;
`);