小编Und*_*ain的帖子

我如何使用 React 测试库编写测试来检查悬停是否更改了组件样式?

我正在测试我的应用程序并遇到问题。当尝试测试Dropdown组件中的行是否对悬停施加效果时,我注意到我无法检查元素的背景颜色,我觉得这很奇怪。

尝试使用 jest-dom matcher "toHaveStyle()",下面是一个示例,我一生都无法让它工作。

下拉菜单.test.tsx

test('Should contain clickable elements that change style when hovered', () => {
    const dropElement1 = screen.getByLabelText('testLabel1');
    expect(dropElement1).toHaveStyle('background: white');
});
Run Code Online (Sandbox Code Playgroud)

错误

错误

我还尝试过使用background-color、使用十六进制值(另一个有趣的错误是 PrettyDom 将十六进制转换为 RGB),或者添加到toHaveStyle().

我确信该元素确实是白色的,但我不明白出了什么问题。如果我的方法是不好的做法,并且您对如何检查这一点有更好的了解,或者您对我的问题有解决方案,请告诉我!

unit-testing reactjs jestjs react-testing-library jest-dom

8
推荐指数
1
解决办法
2万
查看次数