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

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