css - 如何使用 Jest 测试样式

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来自 @testing-library/dom和 render来自 @testing-library/react对于我的测试。

Answer 1

我同意多米尼克的观点。 Jest 非常适合测试呈现的 HTML 的属性。除非样式在 HTML 中(内联样式)，否则 Jest 不会看到它(正如您所指出的)。在不内联样式的情况下，您可以测试的最深层次是验证它是否具有正确的类名。
也许是在像 Cypress 这样的浏览器中运行的测试框架？阅读 visual testing with Cypress .