如何在Jest中测试异步XMLHttpRequest回调?

辐射sha

我有以下的Jest测试,包括使用ajax调用模拟服务器XMLHttpRequest

import mock from "xhr-mock";

describe("ajax callbacks", function() {
  beforeEach(function() {
    mock.setup();
  });

  afterAll(function() {
    mock.teardown();
  });

  it("gets called when done", function(done) {
    mock.get("/get-url", {
      status: 200,
      body: '{ "key": "value" }'
    });

    const doneCallback = jest.fn();

    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/get-url");
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        doneCallback();
        done();
      }
    }
    xhr.send();

    expect(doneCallback).toHaveBeenCalled();
  });
});

这显然会失败,因为AJAX调用是异步处理的,并且在调用回调之前就已经产生了期望。

有什么办法可以让Jest等到回调被调用后再进行期望?

请注意,由于域要求,我无法将请求转换为同步请求。而且我也不能仅仅为了能够对其进行测试就将其转换为基于Promise的API。这只是正在编写的测试的简化版本,以便此处的人们可以轻松地掌握它。实际的代码是不同的,并且它对此处编写的内容具有抽象性。

辐射sha

我基本上通过使用async/awaitJest提供支持来解决它解决方案是将异步请求包装到中,PromisePromiseonreadystatechange调用回调解决因此:

import mock from "xhr-mock";

describe("ajax callbacks", function() {
  beforeEach(function() {
    mock.setup();
  });

  afterAll(function() {
    mock.teardown();
  });

  it("gets called when done", async function() {
    mock.get("/get-url", {
      status: 200,
      body: '{ "key": "value" }'
    });

    const doneCallback = jest.fn();

    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/get-url");

    await new Promise(function(resolve) {
      xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
          doneCallback();
          resolve();
        }
      }
      xhr.send();
    });

    expect(doneCallback).toHaveBeenCalled();
  });
});

使用await将使测试暂停直到Promise解决。我知道这感觉有些棘手。但这就是我们目前所拥有的。我尝试寻找其他解决方案,但找不到任何解决方案。

要了解有关async/await与Jest一起使用的更多信息,请参考此处

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在JMeter中测试异步回调?

在 Jest 中测试回调函数

如何在Flutter / Dart中创建异步回调?

如何在异步库的“每个”函数中定义回调?

如何在Playground中运行异步回调

如何在WinRT对象中实现异步回调?

如何在节点js中创建异步回调?

如何在 javascript 中嵌套异步函数的回调?

如何在 spock 中测试 ListenableFuture 回调

如何在Chai中测试函数的回调?

Jest的回调测试实际上如何工作

测试异步或多线程代码中的回调执行

异步回调的返回值(在单元测试中)

使用Jest在React中测试内联回调函数

在javascript中,异步回调如何在单个线程中工作?

在GWT异步回调中,如何在onSuccess中处理相同的返回类型?

如何在React with Enzyme中测试由子组件回调调用的组件回调?

如何在vertx中重构异步调用链,以避免回调地狱

如何在JS异步回调函数中返回值-GAPI

如何在Celery link_error回调中获取“完整”异步结果

如何在Node.js模块中处理异步回调?

对如何在node.js中实现异步回调感到困惑

如何在if-else语句中处理异步回调?

如何在继续之前等待异步回调方法?

如何在ReactJS / Typescript应用程序中使用Jest在Class中测试公共异步函数

如何在异步函数中测试jest.fn()。mock.calls

使用Node的Jest测试-超时-在jest.setTimeout指定的5000ms超时内未调用异步回调

线程中的异步回调

使用Jasmine测试异步回调