Test styles triggered by mouse over events

user_10377638 0
Viewed 4364

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?

react-testing-library reactjs
1 Answers

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