reactjs - 使用 Jest/Enzyme 延迟后测试 React 组件的意外行为

Question

我有一个非常基本的 React 组件，它在加载某些内容时显示一系列点，默认情况下它最多显示 3 个点，并且点按 componentDidMount 函数中设置的时间间隔递增，重置点数。点数和间隔都可以通过 props 进行覆盖。这个组件在下面。

import * as React from 'react';

export interface Props {
    interval?: number;
    dots?: number;
}

class LoadingDots extends React.Component<Props, object> {
    public static defaultProps: Partial<Props> = {
        interval: 300,
        dots: 3
    };
    interval: any;

    state = {
        frame: 1,
        interval: this.props.interval,
        dots: this.props.dots
    }

    componentDidMount = () => {
        this.interval = setInterval(() => {
            this.setState({
                frame: this.state.frame + 1
            });
        }, this.props.interval);
    }

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

    public render() {
        let dots = this.state.frame % (this.props.dots + 1);
        let text = "";
        while (dots > 0) {
            text += ".";
            dots--;
        }
        return (
                <p className="loadingDots" {...this.props}>{text}</p>
        )
    }
}

export default LoadingDots;

我现在遇到的问题是在 Jest Documentation 之后测试这个组件。和 Jest react testing: Check state after delay我已经编写了下面的测试来检查在帧集末尾渲染的正确默认点数(将通过 200 毫秒的延迟)。

test('LoadingDots by default renders with 3 dots', () => {
    var loadingDots = Enzyme.shallow(<LoadingDots interval={100} />);
    jest.useFakeTimers();
    jest.runAllTimers();
    setTimeout(() => {
        expect(loadingDots.find('p').text()).toBe("...")
    }, 300);
});

该测试通过但不应该通过，无论我在 expect(loadingDots.find('p').text()) 的 .ToBe 中输入什么值，它都会通过。 toBe("...")。

我已经尝试将组件渲染为 var loadingDots = Enzyme.mount(); 和 var loadingDots = Enzyme.render(); 但结果仍然相同，有人看到这里出了什么问题吗？我怎样才能让它正常工作？

Answer 1

问题 1

jest.useFakeTimers() 将计时器函数(如 setInterval)替换为计时器模拟，以跟踪它们被调用时使用的参数。它需要在创建组件之前调用，以便 componentDidMount 中的 setInterval 调用调用模拟而不是真正的 setInterval。

问题 2

jest.runAllTimers() 尝试运行所有计时器回调，直到没有剩余。在这种情况下，setInterval 永远不会被取消，所以 jest.runAllTimers 会尝试永远运行计时器回调，而 Jest 会在测试结束后用错误中断测试运行 100000 次回调。

在这种情况下提前时间的正确方法是使用 jest.advanceTimersByTime (或者 Jest < 22 的别名 jest.runTimersToTime)。

问题 3

setTimeout 不需要，因为 Timer Mocks同步执行。

---

这是您的组件的更新测试:

test('LoadingDots by default renders with 3 dots', () => {
  jest.useFakeTimers();  // replace timer functions like setInterval with timer mocks
  const dots = 3;
  const interval = 100;
  var loadingDots = Enzyme.shallow(<LoadingDots interval={interval} />);
  for(let i = 1; i <= 8; i++) {
    const expectedDots = i % (dots + 1);
    expect(loadingDots.find('p').first().text()).toBe('.'.repeat(expectedDots));
    jest.runTimersToTime(interval);  // simulate time passing and run any applicable timer callbacks
  }
  jest.useRealTimers();  // restore timer functions
});