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

【问题标题】：Unexpected behaviour testing React component after delay with Jest/Enzyme使用 Jest/Enzyme 延迟后的意外行为测试 React 组件
【发布时间】：2019-02-23 12:48:33
【问题描述】：

我有一个非常基本的 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();，但结果仍然相同，有人知道这里出了什么问题吗？我怎样才能让它正常工作？

【问题讨论】：

标签： reactjs typescript testing jestjs enzyme

【解决方案1】：

问题 1

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

问题 2

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

在这种情况下，正确的提前时间方法是使用jest.advanceTimersByTime（或Jest 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
});

【讨论】：