componentDidMount 내부에서 setTimeout을 테스트 해 보시겠습니까?

Question

나는 다음과 같은 구성 요소가 있습니다

class PlayButton extends Component { 
    constructor() { 
     super(); 

     this.state = { glow: false }; 
     this.play = this.play.bind(this); 
    } 
componentDidUpdate() { 
     if (this.props.media.currentTime === 0 && this.props.media.duration !== 0 && !this.state.glow) { 
      console.log('entering') 
      setTimeout(() => { 
       console.log('did time out') 
       this.setState({ glow: true }); 
      }, 3000); 
     } 

     if (this.props.media.currentTime !== 0 && this.state.glow) { 
      this.setState({ glow: false }); 
     } 
    } 

을 그리고 나는 componentDidMount 내부 setState를 검사 할 만 끝낼 수 없습니다

it('button shoould start glowing',() => { 
     const wrapper = mount(<PlayButton media={{ currentTime: 0, duration: 1 }}/>); 
     wrapper.update() 
     jest.runAllTimers(); 
     expect(wrapper.state('glow')).toBe(true); 
    }); 

어떤 생각? 감사합니다.

Answer 1

당신은 대신 즉시 콜백을 호출 setTimeout의 모의에 전달할 수는 :

static defaultProps = { 
    timeout: setTimeout 
} 

---

this.props.timeout(() => { 
    console.log('did time out') 
    this.setState({ glow: true }); 
}, 3000); 

---

it('button shoould start glowing',() => { 
    const wrapper = mount(<PlayButton media={{ currentTime: 0, duration: 1 }} 
           timeout={(fn, _) => fn()}}/>); 
    wrapper.update() 
    jest.runAllTimers(); 
    expect(wrapper.state('glow')).toBe(true); 
}); 

Answer 2

알려줘야, 이것은 내가 그것을 해결하는 방법입니다

it('button shoould start glowing',() => { 
     let clock = sinon.useFakeTimers(); 
     const wrapper = mount(<PlayButton media={{ currentTime: 0, duration: 1 }}/>); 
     wrapper.update() 
     clock.tick(3000) 
     expect(wrapper.state('glow')).toBe(true); 
    });