我正在尝试编写一些前端测试,并努力为具有嵌入式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。