如何測試發生反應具有的CSS過渡組件？

Question

下面是兩種方法，我用改變彈出包裝的狀態。

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轉換的樣式化組件。我想測試我正在狀態只開放爲打開狀態的過渡已經完成之後纔到來的組件。我使用的玩笑快照測試。同時用開玩笑編寫測試用例的任何一個面對此類問題的？請幫忙。

Answer 1

可以模擬transitionEnd事件像任何其他事件作出反應。

如果您在使用酶它看起來是這樣的：

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); 
}); 

此外，您可能要正確添加轉換事件的組件：

(as a functional component for brevity) 
const Component =() => 
    <div onTransitionEnd={this.handleTransitionEnd} onClick={this.startStatusTransition} />