如何使用 Jest 和/或 Enzyme 测试由 React 组件呈现的样式和媒体查询

Posted 2023-02-22

【中文标题】如何使用 Jest 和/或 Enzyme 测试由 React 组件呈现的样式和媒体查询

【英文标题】：How to test styles and media queries rendered by a React component with Jest and/or Enzyme

【发布时间】：2019-07-23 16:11:50

【问题描述】：

我正在使用styled-components 开发一个我的公司将在内部使用的框架。我们需要创建新的响应式组件，当我在浏览器中测试它时，我可以看到当我调整窗口大小时渲染的组件如何改变其背景颜色。我正在尝试以编程方式实现相同的功能并使用 Jest 和/或 Enzyme 测试功能，但到目前为止我还没有成功。有人知道吗？

这是组件的代码：

const Component = styled.div`
    height: 200px;
    width: 200px;

    background-color: purple;

    @media (max-width: $DESKTOPpx) 
        background-color: purple;
    

    @media (max-width: $TABLETpx) 
        background-color: yellow;
    

    @media (max-width: $MOBILEpx) 
        background-color: red;
    
`

我使用jest-styled-components 包中的toHaveStyleRule 编写了以下测试。测试通过了，因为它们有效地验证了 MOBILE 媒体查询的“背景颜色”是“红色”，等等。

expect(<Component />).toHaveStyleRule(
     'background-color': 'red' ,
     media: `(max-width: $MOBILEpx)` 
)

expect(<Component />).toHaveStyleRule(
     'background-color': 'yellow' ,
     media: `(max-width: $TABLETpx)` 
)

expect(<Component />).toHaveStyleRule(
     'background-color': 'blue' ,
     media: `(max-width: $DESKTOPpx)` 
)

但是，如果我通过 window.resizeTo(250, 250) 调整窗口大小，测试会失败，因为我希望组件看起来是红色的，而“背景颜色”似乎总是“紫色”

对于调整窗口大小，我使用并且我一直在尝试使用 JSDOM 这个 sn-p：https://gist.github.com/javierarques/d95948ac7e9ddc8097612866ecc63a4b

有什么线索吗？提前致谢！

【参考方案1】：

我能够在本地重新创建它，但我意识到前 2 个 expects 通过了，而最后一个没有。这是因为DESKTOP 媒体查询块将background-color 设置为“紫色”，而expect 正在寻找“蓝色”。

    background-color: purple;

    @media (max-width: $DESKTOPpx) 
        background-color: purple;
    

expect(<Component />).toHaveStyleRule(
     'background-color': 'blue' ,
     media: `(max-width: $DESKTOPpx)` 
)

如果这不是您实际看到的问题，请告诉我。