Javascript 了解如何模拟react组件测试的窗口大小更改

因此，基本上，当组件装载时，我有一个事件侦听器来侦听调整大小事件。它切换isMobileView状态，然后将其作为道具传递给孩子们。因此，这是必不可少的工作和测试。我对测试还比较陌生，我正在试图找到一种方法来编写一个测试，它可以调整窗口的大小，使所有的逻辑发生，并测试它应该如何执行

这是代码-

componentDidMount() {
    this.setMobileViewState()
    window.addEventListener('resize', this.setMobileViewState.bind(this));
}

setMobileViewState() {
    if(document.documentElement.clientWidth <= this.props.mobileMenuShowWidth) {
        this.setState({ isMobileView: true })
    } else {
        this.setState({ isMobileView: false })
    }
}

componentDidMount（）{
this.setMobileViewState（）
window.addEventListener（'resize'，this.setMobileViewState.bind（this））；
}
setMobileViewState（）{
如果（document.documentElement.clientWidth使用Jest和Ezyme，您可以执行以下操作。Jest已嵌入JSDOM。在您的测试中，Jest提供了
窗口
对象，它由
全局
表示（我认为Jest设置的默认
窗口.innerWidth
为1024px）：

test（'在视口更改时测试一些内容'，（）=>{
//安装要测试的组件。
const component=mount（）；
...
//将视口更改为500px。
global.innerWidth=500；
//触发窗口调整大小事件。
global.dispatchEvent（新事件（'resize'））；
...
//运行您的断言。
});
如果收到typescript错误消息

无法分配给“innerWidth”，因为它是只读属性

尝试：

试试这句话：

window=Object.assign（窗口，{innerWidth:500}）；
根据位于的文档，innerWidth是只读的。我们应该使用window.resizeBy（x，y）吗；取而代之的是？我使用的是Jest 23.6.0，它对我有效，可能还需要一个升级，并且仍然在Jest 24.1.0中工作。使用
resizeBy
是有意义的，但是Jest没有实现这一点，并且
innerWidth
不是只读的，这似乎不再有效：
属性“innerWidth”在类型“Global”上不存在>开玩笑地工作21.2.1
test('Test something when the viewport changes.', () => {

    // Mount the component to test.
    const component = mount(<ComponentToTest/>);

    ...

    // Change the viewport to 500px.
    global.innerWidth = 500;

    // Trigger the window resize event.
    global.dispatchEvent(new Event('resize'));

    ...

    // Run your assertion.
});

Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 200})