所以基本上当组件安装时,我有一个事件监听器监听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 })
}
}
我知道代码有效,但我想为它编写一个测试.基本上只是确保状态正确变化的东西.
解决方法
使用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.
});
