3

我正在测试我的应用程序，但遇到了问题。当试图测试我的下拉组件中的一行是否对悬停产生影响时，我注意到我无法检查元素的背景颜色，我觉得这很奇怪。

尝试使用 jest-dom 匹配器“toHaveStyle()”，以下是一个我一生都无法让它工作的例子。

dropdown.test.tsx

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

错误

错误

我也尝试过使用“背景颜色”，使用十六进制值（另一个有趣的错误是 PrettyDom 将十六进制转换为 RGB），或者添加 ; toHaveStyle() 中的声明。

我确定元素确实是白色的，我不明白出了什么问题。如果我的方法是不好的做法，并且您对如何检查有更好的了解，或者您对我的问题有解决方案，请告诉我！

4

1 回答 1

1

您的测试用例找不到dropElement1样式，因为它是一个下拉菜单，并且由于您只是渲染Dropdonw组件而没有打开。

您需要在菜单上模拟鼠标悬停或单击操作DropDown，然后期望具有样式属性。

import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import { Dropdown } from "./Dropdown";

test('Should contain clickable elements that change style when hovered', () => {
    render(<Dropdown />);
    
    fireEvent.mouseEnter(screen.getByText('drop-down-btn'));
    
    await waitFor(() => screen.getByTestId('dropdown-menu'))

    expect(screen.getByLabelText('testLabel1')).toHaveStyle('background: white');
});

注意：由于您尚未发布该Dropdown组件，因此我放置了一些示例名称以获取您的切换和下拉菜单。此外，您可以在react-testing-library上阅读有关鼠标事件的信息。您也可以使用mouseOver，但这取决于您的下拉菜单实现。

于 2021-10-12T09:19:04.907 回答