如何使用 Jest 测试样式

Posted 2023-03-06

【中文标题】如何使用 Jest 测试样式

【英文标题】：How to test styling using Jest

【发布时间】：2021-02-14 16:39:08

【问题描述】：

我正在开发一个 React 项目，该项目使用 SASS（SCSS 语法）进行样式设置，并使用 Jest 进行单元测试。我在我的项目中测试样式时遇到问题。这是一个简单的例子：

在 component.js 中（导入单独的样式表）...

const Component = () => 
     return (
        <div className="greeting">Hello</div>
     )

在我的 .scss 文件中...

.greeting 
    background-color: red;

在我的测试文件中...

test('background color should be red', () => 
    render(<Component />);
    expect(screen.getByText('Hello')).toHaveStyle('background-color: red');
)

测试失败：

expect(element).toHaveStyle()

    - Expected

    - background-color: red;

但是，如果我使用内联样式 (<div style=backgroundColor: red>Hello</div>)，则测试通过。

有人遇到过这个问题吗？我还想知道其他人在 Jest 中测试样式的方法（特别是当您的样式保存在单独的 .scss 文件中时）

我正在使用来自@testing-library/dom 的screen 和来自@testing-library/react 的render 进行测试。

【问题讨论】：

Jest 也不适合测试不是 CSS-in-JS 的 CSS。我可能会研究视觉差异？！

【参考方案1】：

您可以使用window.getComputedStyle() 访问所有样式的最终结果，甚至是类中的样式。

在您的情况下，为了测试 div 元素最终的背景颜色，您将编写：

test('background color should be red', () => 
    render(<Component />);

    const element = screen.getByText('Hello');
    const styles = getComputedStyle(element);

    expect(styles.backgroundColor).toBe('red');
)

【参考方案2】：

我同意多米尼克的观点。 Jest 非常适合测试呈现的 html 的属性。除非样式在 HTML 中（内联样式），否则 Jest 不会看到它（正如您所指出的）。在不内联样式的情况下，您可以进行的最深入测试是验证它是否具有正确的类名。

也许是在赛普拉斯之类的浏览器中运行的测试框架？阅读visual testing with Cypress。