Question

我有一个非常基本的React组件，它在加载某些东西时显示一系列的点，默认情况下，它最多显示3个点，并且点在componentDidMount函数中设置的间隔上递增，在点数。点数和间隔都可以通过传递道具来覆盖。该组件在下面。

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之后，我编写了下面的测试，以检查在集的末尾是否渲染了正确的默认点数帧（将以200ms的延迟通过）。

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

此测试通过，但不应该通过，无论我在.ToBe的{{1}}中输入什么值，它都会通过。

我尝试将组件渲染为expect(loadingDots.find('p').text()).toBe("...")和var loadingDots = Enzyme.mount();，但结果仍然相同，有人看到这里出了什么问题吗？我如何才能使其正常工作？

Answer 1

问题1

jest.useFakeTimers()用计时器模拟代替setInterval之类的计时器函数，该计时器模拟跟踪调用它们的参数。需要在创建组件之前调用它，以便setInterval中的componentDidMount调用会调用模拟而不是真实的setInterval。

问题2

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

在这种情况下，延长时间的正确方法是使用jest.advanceTimersByTime（或jest.runTimersToTime <22的别名Jest）。

问题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
});

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

1 个答案: