iframe使用Jest接收单元测试React元素的高度

时间:2019-07-10 21:43:18

标签: reactjs unit-testing iframe jestjs height

我正在尝试编写一些前端测试,并努力为具有嵌入式Iframe的react组件编写单元测试。包装div(div.embed响应)从iframe获取高度。我想为此编写一些单元测试。一项测试涵盖了该场景,以检查iframe是否可以正确渲染。我想编写另一个测试来检查高度,即高度设置是否等于iframe的高度。但是我不确定该如何进行。我想用玩笑写它。

下面是代码。

从'react'导入React,{组件}; 从'../../env'导入{env};

const iFrameInitialSize = 550;

导出类MenuContainer扩展了组件{

constructor() {
    super();
    this.state = {
        height: iFrameInitialSize,
    };
    this.updateDimensions = this.updateDimensions.bind(this);
}

componentDidMount() {
    window.addEventListener('message', this.updateDimensions, false);
}

componentWillUnmount() {
    window.removeEventListener('message', this.updateDimensions, false);
}

updateDimensions(event) {
    if (event.origin === env.runtimeConfig.backend.IFRAME_URL) {
        this.setState({
            height: event.data,
        });
    }
}

render() {
    return (
        <div className='embed-responsive' style={{ height: this.state.height, overflow:'hidden', scrolling:'no' }}>
            <iframe
                className='embed-responsive-item'
                src={env.runtimeConfig.backend.IFRAME_URL}
                style={{ minHeight: '100%' }}/>
        </div>

    );
}

}

我想测试一下,在侦听器执行了updatedDimensions()之后,将正确的高度设置为与iframe相同的div。

0 个答案:

没有答案