Typescript 语法 - 如何监视 Ajax 请求？

Question

我正在尝试编写一个单元测试，以验证是否已进行 ajax 调用。代码很简单：

it('test spycall',()=>{
spyOn($,"ajax");
//my method call which in turns use     ajax
MyFunc();
expect($.ajax.calls.mostRecent().args[0]["url"].toEqual("myurl");
});

我得到的错误：

Property 'calls' doesn't exist on type '{settings:jqueryAjaxSettings):jQueryXHR;(url:string, settings?:JQueryAjaxSettings}

Answer 1

$.ajax.calls，除其他外，是 Jasmine 测试框架的一部分，而不是 JQuery 本身（如您所知，Jasmine（或者更确切地说，Jasmine-Jquery，您的插件正在使用）正在向 JQuery 的原型添加某些调试功能，以便能够测试 ajax 调用）。

不好的部分是您的 .d.ts typescript 定义文件，充当 typescript 和纯 JS 库之间的接口的文件不知道 Jasmine 的功能。

您可以通过多种方式解决此问题，例如

查看是否有人针对 Jasmine 的功能调整了 JQuery .d.ts 文件或
通过修改原始文件自己创建新的 .d.ts 文件，或者（我会做的）
通过将 $.ajax 声明为 any 来覆盖打字稿定义，或者在测试代码库中根本不包含打字稿定义并将 $ 声明为 any。

Answer 2

有两种方法可以消除错误：

// 1
expect(($.ajax as any).calls.mostRecent().args[0].url).toEqual("myurl");

// 2
let ajaxSpy = spyOn($,"ajax");
expect(ajaxSpy.calls.mostRecent().args[0].url).toEqual("myurl");

您也可以使用部分匹配：

expect(($.ajax as any).calls.mostRecent().args).toEqual([
  jasmine.objectContaining({url: "myurl"})
]);

Typescript 语法 - 如何监视 Ajax 请求？

Typescript syntax - How to spy on an Ajax request?

ajax

spy

jasmine

typescript