在 React HOC 组件中测试计时器答案

【问题标题】：Testing timers in React HOC component在 React HOC 组件中测试计时器
【发布时间】：2018-01-29 01:43:34
【问题描述】：

我正在尝试测试组件中的间隔，但它不起作用。

组件：

import React, { Component } from "react";

  export const withTimer = WrappedComponent =>enter code here {
    class WithTimer extends Component {
      constructor(props) {
        super(props);
        this.state = {
          elapsedTime: 0
        }
      }

    componentDidMount() {
      this.intervalId = setInterval(
        () =>
          this.setState(({ elapsedTime }) => ({
            elapsedTime: elapsedTime + 1
          })),
        1000
      );
    }

    componentDidUpdate() {
      const { elapsedTime } = this.state;
      if (elapsedTime >= 2) {
        run_function();
      }
    }

    componentWillUnmount() {
      clearInterval(this.intervalId);
    }

    render() {
      return (
        <WrappedComponent
          elapsedTime={this.state.elapsedTime}
        />
      );
    }
  }

  return WithTimer;
};

测试：

describe("<WithTimer />", () => {
  const InnerComponent = () => {
    return <div>hello</div>;
  };
  const Comp = withTimer(InnerComponent);

  it("updates correctly", () => {
    const wrapper = shallow(<Comp />, {lifecycleExperimental: true });
    wrapper.update();
    jest.useFakeTimers();
    jest.advanceTimersByTime(3123);
    jest.runAllTimers()
    wrapper.update();

    expect(setInterval).toHaveBeenCalledTimes(1);
  })
});

我尝试了几个组合，但 elapsedTime 没有更新并且 run_function() 没有被触发。间隔函数是正确模拟的，但它被调用了零次。我做错了什么？

【问题讨论】：

标签： reactjs intervals jestjs

【解决方案1】：

在构造函数中定义属性intervalId，使其在整个类中都可以访问。

class WithTimer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            elapsedTime: 0
        }
        this.intervalId = null;
    }
    ...
}

另外我建议您改进代码检查是否定义了 setInterval 以避免组件安装和卸载时出现错误行为。

componentDidMount() {
    if(!this.intervalId) {
        this.intervalId = setInterval(
            () =>
                this.setState(({ elapsedTime }) => ({
                    elapsedTime: elapsedTime + 1
            })),
            1000
        );
    }
}

componentWillUnmount() {
    clearInterval(this.intervalId);
    this.intervalId = null;
}

【讨论】：