reactjs - 使用 setInterval 测试 React 组件方法

Question

我正在使用磁带、 enzyme 、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

这个问题的答案很简单。使用 sinon 假定时器 sinonjs.org/releases/v2.2.0/fake-timers 导致 Sinon 替换全局 setTimeout 以便测试可以完成

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