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 전환과 함께 스타일이 지정된 구성 요소입니다. 전환 된 상태가 완료된 후에 만 ​​열린 상태로 상태를 열려고하는 구성 요소를 테스트하려고합니다. jest snapshot testing을 사용하고 있습니다. 농담으로 테스트 케이스를 작성하는 동안 이런 종류의 문제에 직면 한 사람이 있습니까? 도와주세요.

Answer 1

다른 React 이벤트와 마찬가지로 transitionEnd 이벤트를 시뮬레이션 할 수 있습니다.

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

: 당신은 바로 구성 요소를 사용자의 전환 이벤트를 추가 할 수 있습니다, 또한

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

: 당신이 효소를 사용하는 경우

그것과 같을 것