我正尝试在某个视口宽度的组件上运行测试。我正在做以下事情,但这似乎并没有改变它:
test('Component should do something at a certain viewport width.', () => {
global.innerWidth = 2000;
const component = mount(<SomeComponent />);
// ...
});
我还找到了一篇解释如何使用JSDom实现这一点的文章,但由于Jest现在随JSDom一起提供,我想知道是否有一个本地解决方案。
https://www.codementor.io/pkodmad/dom-testing-react-application-jest-k4ll4f8sd
3条答案
按热度按时间vshtjzan1#
背景资料:
jsdom
不实现window.resizeBy()
或window.resizeTo()
jsdom
将窗口innerWidth和innerHeight定义为1024 x 768resize
事件,可以使用jsdom
模拟窗口调整大小下面是一个例子:
comp.js
comp.test.js
注意事项:
Enzyme
v3shallow
calls React lifecycle methods likecomponentDidMount()
开始,因此可以代替mount
使用ffdz8vbo2#
如果你使用TypeScript,它会抱怨
window.innerWidth
/innerHeight
是只读的。您可以通过重新声明属性来解决此问题:或者使用
Object.assign
方法:这两个都不是很好的解决方案,但它们都有效。
0pizxfdo3#
下面的测试适合我。源代码不再标记为未覆盖。
调整组件中监听器的大小: