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

我正在使用

样式化组件

开发一个公司内部使用的框架。我们需要创建新的响应组件，当我在浏览器中测试时，我可以看到渲染组件在调整窗口大小时如何更改其背景色。我试图通过编程实现同样的功能，并用Jest和/或Ezyme测试功能，但到目前为止我还没有成功。有人知道吗

这是组件的代码：

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

    background-color: purple;

    @media (max-width: ${DESKTOP}px) {
        background-color: purple;
    }

    @media (max-width: ${TABLET}px) {
        background-color: yellow;
    }

    @media (max-width: ${MOBILE}px) {
        background-color: red;
    }
`

我使用

jest-styled-components

包中的

toHaveStyleRule

编写了以下测试。测试通过是因为它们有效地验证了移动媒体查询的“背景色”为“红色”，等等

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

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

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

expect（）.toHaveStyleRule(
{“背景色”：“红色”}，
{media:`（最大宽度：${MOBILE}px）`}
)
expect（）.toHaveStyleRule(
{“背景色”：“黄色”}，
{media:`（最大宽度：${TABLET}px）`}
)
expect（）.toHaveStyleRule(
{“背景色”：“蓝色”}，
{media:`（最大宽度：${DESKTOP}px）`}
)

但是，如果我通过

window.resizeTo（250250）

调整窗口大小，测试就会失败，因为我希望组件看起来是红色的，而“背景色”看起来总是“紫色”

为了调整窗口的大小，我使用JSDOM并一直在尝试以下代码段：

---

有线索吗？提前谢谢

我能够在本地重新创建，但我意识到前2个

expect

s通过了，而最后一个没有通过。这是因为

DESKTOP

媒体查询块正在将

背景色设置为“紫色”，而
expect
正在查找“蓝色”

expect（）.toHaveStyleRule(
{“背景色”：“蓝色”}，
{media:`（最大宽度：${DESKTOP}px）`}
)

如果这不是你真正看到的问题，请告诉我

    background-color: purple;

    @media (max-width: ${DESKTOP}px) {
        background-color: purple;
    }

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