Question

我正在一个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文件中时）

我正在使用screen的{{1}}和@testing-library/dom的{{1}}进行测试。

Answer 1

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

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

Answer 2

您可以使用 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');
})

如何使用Jest测试样式

2 个答案: