下面是我用来更改弹出包装器状态的两种方法。
const waitTransitionEnd = (element) => new Promise(resolve => {
const onEnd = () => {
element.removeEventListener('transitionend', onEnd)
resolve()
}
element.addEventListener('transitionend', onEnd)
})
doOpen () {
const dialog = findDOMNode(this.dialog)
this.setState({ status: OPENING })
return waitTransitionEnd(dialog).then(() => {
this.setState({ status: OPENED })
this.focus()
})
}
doClose () {
const dialog = findDOMNode(this.dialog)
this.setState({ status: CLOSING })
return waitTransitionEnd(dialog).then(() => {
this.setState({ status: CLOSED })
})
}
所以对话框是带有 css 过渡的样式组件。我正在尝试测试我只获得打开状态的组件,因为只有在转换完成后才会出现打开状态。我正在使用 Jest 快照测试。有人在 Jest 编写测试用例时遇到过此类问题吗?请帮忙。
最佳答案
您可以像模拟任何其他 React 事件一样模拟 transitionEnd 事件。
如果您使用的是 Enzyme,它看起来像这样:
test('should do something after transition ends', () => {
const wrapper = shallow(<Component>Label text</Component>);
expect(wrapper).toHaveState('status', OPENED);
wrapper.simulate('transitionEnd');
expect(wrapper).toHaveState('status', CLOSED);
});
此外,您可能希望在您的组件中添加过渡事件:
const Component = () =>
<div onTransitionEnd={handleTransitionEnd} onClick={startStatusTransition} />
关于reactjs - 如何测试具有CSS转换的 react 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46852753/