弄清楚如何模拟react组件测试的窗口大小变化

IT技术 javascript reactjs unit-testing jestjs enzyme
2021-05-23 05:21:06

所以基本上当组件安装时，我有一个事件侦听器侦听调整大小事件。它切换 isMobileView 状态，然后将其作为props传递给子级。因此，它必须有效并经过测试。我对测试还很陌生，我正在尝试找出一种方法，我可以编写一个测试来调整窗口大小并使所有逻辑发生并测试它应该如何执行。

这是代码 - 

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 })
    }
}

我知道代码有效，但我想为它编写一个测试。基本上只是确保状态正确更改的东西。

3个回答

使用 Jest 和 Enzyme，您可以执行以下操作。Jest 内置了 JSDOM。在您的测试中，Jest 提供了window对象，它由global（我认为window.innerWidthJest的默认设置为 1024px）表示：

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.
});

如果您收到typescript错误消息

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

尝试： 

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

试试这一行：

window = Object.assign(window, { innerWidth: 500 });
其它你可能感兴趣的问题
上一篇useState hook setter 错误地覆盖状态 下一篇扩展运算符和 EsLint