Javascript 如何使用Jest测试不同的屏幕宽度

有人知道如何使用Jest测试React组件的不同屏幕宽度或响应性吗？我一直在寻找一个合适的方法来做这件事，但没有一个解决方案对我有效。例如，我发现有人建议

matchMediaPolyfill（window）

，有人建议使用自定义宽度模拟div，但这些解决方案都不起作用。请帮忙！谢谢大家!

Jest

使用

jsdom

模拟浏览器

jsdom

为1024 x 768

您可以根据需要手动设置

窗口的宽度和高度，并触发
调整大小
事件

以下是一个例子：


comp.js

import*as React from'React'；
导出默认类Comp.Comp组件{
构造函数（…参数）{
超级（…args）；
this.state={宽度：0，高度：0}
}
更新维度=（）=>{
this.setState（{width:window.innerWidth，height:window.innerHeight}）；
}
componentDidMount（）{
这个.updateDimensions（）；
window.addEventListener（“resize”，this.updateDimensions）；
}
组件将卸载（）{
removeEventListener（“resize”，this.updateDimensions）；
}
render（）{
返回{this.state.width}x{this.state.height}；
}
}


comp.test.js

import*as React from'React'；
从“酶”导入{shall}；
从“/Comp”导入Comp；
常量大小窗口=（x，y）=>{
window.innerWidth=x；
window.innerHeight=y；
dispatchEvent（新事件（'resize'））；
}
描述（'Comp'，（）=>{
它（'应该显示窗口大小'，（）=>{
常量分量=浅（）；
expect（component.html（））.toEqual（'1024x768'）；
调整窗口大小（500300）；
expect（component.html（））.toEqual（'500x300'）；
调整窗口大小（28801800）；
expect（component.html（））.toEqual（'2880 x 1800'）；
});
});
window.innerWidth和window.innerHeight是只读方法，请使用window.resizeTo（width，height）方法。