鼠标悬停事件触发的测试样式

Question

我有一个按钮，当鼠标移到它上面时会显示不同的样式：

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

这是我的测试：

fireEvent.mouseOver(button);

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

然而，测试抱怨背景颜色是绿色而不是红色。在调用

fireEvent.mouseEnter

之前，我尝试了

mouseOver

。没有任何区别。我错过了什么？

Answer 1

您需要等待事件被触发并应用样式。你可以试试

fireEvent.mouseOver(button);

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

Answer 2

-2
投票

也许你可以把它包装在 act() 中。