2017-01-04 6 views
0

Ich habe die folgende Komponente:Testausführung von setTimeout in componentDidMount?

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

Und ich will die setState innerhalb des componentDidMount testen, aber kann es nicht getan:

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

Irgendwelche Gedanken? Danke!

Antwort

0

Sie in einem Mock von setTimeout passieren konnte, dass statt nur sofort den Rückruf ruft:

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

Aber ich müsste meine Komponente ändern. Außerdem würde ich nicht testen, ob sich der Zustand geändert hat, sondern nur, dass die Funktion ausgeführt wurde. – Nicolas

1

Allright, das ist, wie ich es gelöst:

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