Проверка выполнения setTimeout внутри компонентаDidMount?

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

И я хочу, чтобы проверить SetState внутри componentDidMount, но не может сделать это:

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

Allright, это то, как я ее решил:

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