Question

所以基本上当组件安装时，我有一个事件监听器监听resize事件。它切换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 })
    }
}

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

Answer 1

使用Jest和Enzyme，您可以执行以下操作。 Jest已经完成了JSDOM。在你的测试中，Jest提供window对象，它由global表示（我认为Jest设置的默认window.innerWidth为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.
});

Answer 2

如果您收到打字稿错误消息

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

尝试：

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

Answer 3

尝试以下行：

window = Object.assign(window, { innerWidth: 500 });

弄清楚如何模拟改变反应组件测试的窗口大小

3 个答案: