开玩笑 - 如何模拟网络延迟答案

【问题标题】：Jest - how to mock network delay开玩笑 - 如何模拟网络延迟
【发布时间】：2020-04-17 13:46:21
【问题描述】：

我正在尝试在 Jest 中模拟一个慢速网络（使用 React 测试库）。我试图设置的条件是这样的：

UI 处于特定状态
异步 AJAX 请求被触发
ui 更改状态
异步请求完成

在我看来，这将是一个相当普遍的要求，因为使用异步编程，您必须了解在发送 AJAX 请求和完成请求之间可能发生的情况。但是，我根本找不到这方面的任何讨论或工具。

【问题讨论】：

你试过了吗？请提供代码。
@slideshowp2 我的答案在下面

标签： asynchronous jestjs jest-fetch-mock

【解决方案1】：

这个回复非常具体到 react-testing-libaray 但我认为这个概念是普遍适用的。

首先我意识到，如果您启动异步操作以响应用户事件（例如单击），那么您就没有问题 - 只要您调用 fireEvent.click，您就处于状态3，然后你可以使用waitFor()等到状态4。

其次，如果您的环境为您提供了异步操作承诺的句柄，那么您当然可以等待，这样您就没有问题了。

在我的例子中，异步操作是由一个计时器触发的，并且因为它在一个反应组件内部，所以我从外部获得了该计时器的句柄。所以我的场景是这样的：

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { message: "initial" };
    }
    componentDidMount = () => setTimeout(async () => {
        this.setState({ message: "loading" });
        var message = await this.props.longRunningOperation();
        this.setState({ message });
    }, 5000);
    render = () => <div>{this.state.message}</div>
}

组件状态最初是“初始”，在它挂载 5 秒后，它会触发长时间运行的操作并将状态设置为“正在加载”，然后当它得到响应时，它将状态设置为该文本回复。我的测试用例如下所示：

test("long running response", async () => {
    const fakeLongRunningOperation = async () => new Promise(resolve =>
              setTimeout(() => resolve("success"), 2000));
    jest.useFakeTimers();
    var app = render(<App longRunningOperation={fakeLongRunningOperation} />);
    jest.advanceTimersByTime(4000)
    expect(app.queryByText("initial")).not.toBeNull();
    jest.advanceTimersByTime(2000)
    expect(app.queryByText("loading")).not.toBeNull();
    jest.advanceTimersByTime(2000)
    await waitFor(() => { expect(app.queryByText("success")).not.toBeNull() });
});

我们使用一个在 2 秒延迟后返回“成功”的函数来伪造长时间运行的操作。 4 秒后，我们预计状态仍然是“初始”，然后再过 2 秒，我们预计它会“加载”，再过 2 秒，我们预计它会“成功”。而且我们使用开玩笑的假计时器，所以测试实际上不需要 8 秒来运行。

希望对尝试做类似事情的其他人有所帮助。

【讨论】：