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

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