Question

我创建了一个计时器组件，该组件使用setInterval更改要显示的时间。计时器正在工作，但是当我为其创建测试文件时，不会执行setInterval。

我尝试查看测试库，发现可以添加间隔和超时，并尝试了一下但没有用。我不确定为什么会这样。

class Timer extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      timeLeft:300
    };
  }

  componentDidMount = () => {
    this.startTimer();  
  }

  startTimer = () => {
    this.timer = setInterval(() => {
      var time = this.state.timeLeft;
      time--;
      this.setState({ timeleft: time });
    }, 1000);
  }

  render() { 
    ...some logic for mins and seconds

    return (
      <span data-testid='timer-id'>
        {min}:{seconds}
      </span>
    );
  }
}

测试

describe("...", () => {
  it('should count down', async () => {
    const {container} = render(<Timer />);
    await wait(() => getByTestId(container, 'timer-id'));
  });
});

我希望测试用例能够覆盖计时器的间隔部分，但是它仅显示setInterval被调用，而内部代码未在执行

编辑：好的，我想我已经解决了。我不得不将测试用例更改为

describe("...", () => {
  it('should count down', async () => {
    const {container} = render(<Timer />);
    await wait(() => {
      const timer = getByTestId(container, 'timer-id');
      expect(timer).toEqual('04:59');
    )};
  });
});

我猜它找到了它的第一个实例，并在setInterval进行迭代更改之前返回了结果。

Answer 1

您提供的是对象而不是函数

this.timer = setInterval(() => {
  var time = this.state.timeLeft;
  time--;
  this.setState({ timeleft: time });
}, 1000);

为什么我的测试用例中的setInterval无法运行？

1 个答案: