Test React 컴포넌트 메소드와 setInterval

Question

나는 테스트 용으로 테이프, 효소, jsdom 및 sinon을 사용하고있다. 메소드를 호출 한 후에 상태가 변경되었다는 간단한 것을 테스트하고 싶습니다.

class Countdown extends Component { 
     state = { 
     count: 0, 
     countdownStatus: 'stopped' 
     } 

     componentDidUpdate = (prevProps, prevState) => { 
     if (this.state.countdownStatus !== prevState.countdownStatus) { 
     switch (this.state.countdownStatus) { 
      case 'started': 
      this.startTimer() 
      break 
      } 
     } 
     } 

    startTimer =() => { 
     this.timer = setInterval(() => { 
      const newCount = this.state.count - 1 
      this.setState({ 
      count: newCount >= 0 ? newCount : 0 
      }) 
     }, 1000) 
     } 

     handleSetCountdown = (seconds) => { 
     this.setState({ 
      count: seconds, 
      countdownStatus: 'started' 
     }) 
     } 

     render() { 
     const {count} = this.state 
     return (
      <div> 
      <Clock totalSeconds={count} /> 
      <CountdownForm onSetCountdown={this.handleSetCountdown} /> 
      </div> 
     ) 
     } 
    } 

    export default Countdown 

그리고 이것은 작동하지 않습니다. 그것은 통과하지만, 마지막 시험은 항상 어떤 이유에서 건 멈추지 만 모든 시험은 통과하지만 끝내지는 않습니다. 어쩌면 그것은 테스트하지는 않지만 setInterval 때문일 수도 있습니다.

test('Countdown => should set state to 10, (t) => { 
    t.plan(1) 
    const wrapper = shallow(<Countdown />) 
    wrapper.instance().handleSetCountdown(10) 
    wrapper.update() 
    t.equal(wrapper.state().count, 10) 
}) 

편집 : 좋아, 내가 그것을 아래로 생각. 테스트는 setInterval 때문에 종료되지 않습니다. 어떻게 해결할 수 있을까요?

편집 2 : 해결책은 매우 간단했습니다. 방금 추가 한

var clock = sinon.useFakeTimers() 

등 모든 테스트가 완료되어야합니다.

Answer 1

이 문제에 대한 답변은 간단합니다. HTTP : // sinonjs 테스트 당신은 (그리고해야) Sinon의 가짜 타이머를 사용할 수 있습니다

test('Countdown => should set state to 10', (t: Object) => { 
    t.plan(1) 
    const wrapper: Object = shallow(<Countdown />) 
    /* Causes Sinon to replace the global setTimeout so tests can finish */ 
    const clock = sinon.useFakeTimers() 
    const instance = wrapper.instance() 
    instance.handleSetCountdown(10) 
    t.equal(wrapper.state().count, 10) 
})