文档教程知识库【免费下载链接】developer-roadmapInteractive roadmaps, guides and other educational content to help developers grow in their careers.项目地址https://gitcode.com/GitHub_Trending/de/developer-roadmap点击查看免费下载导读在 Angular 应用中几乎所有业务逻辑都绕不开HttpClient发起的网络请求而测试一旦真实触网就会变得缓慢、不稳定且受外部环境制约。本文基于 developer-roadmap 仓库中 roadmaps/angular/content/testing-requests 的知识点展开系统讲解如何使用 Angular 官方提供的angular/common/http/testing库在单元测试中拦截mock应用发出的 HTTP 请求、对请求本身做断言并模拟后端返回响应从而写出不依赖真实服务器、快速且确定性的测试。读完本文你将掌握HttpTestingController的完整用法、常见场景的测试代码模板以及请求测试与 Testing Services、Making Requests 等知识点的衔接关系。为什么必须 Mock HTTP 后端正如测试请求文档开篇所指出的As for any external dependency, you must mock the HTTP backend so your tests can simulate interaction with a remote server.与任何外部依赖一样你必须模拟 HTTP 后端让测试能够模拟与远程服务器的交互。在 Angular 中HTTP Client 是应用与服务器通信的标准通道HttpClient服务类来自angular/common/http。它暴露了对应不同 HTTP 动词的方法get、post、put、delete、patch等每个方法返回一个 RxJSObservable——只有订阅subscribe时请求才会真正发出并在服务器响应后把结果推送给订阅者参见 Making Requests 与 Observable Pattern。在测试中保留真实 HTTP 调用会带来一系列问题不确定性网络延迟、服务端状态、限流rate limiting都会让测试结果飘忽不定缓慢每次运行测试都等待真实网络往返拖慢 CI 与本地开发反馈副作用POST/PUT/DELETE 等变更型请求可能污染真实数据难以复现难以构造错误码、超时、空响应等边界场景。因此 Angular 提供了专门的测试工具库angular/common/http/testing其核心职责有三点恰好对应文档描述的三大能力捕获capture应用发出的请求断言assert这些请求的 URL、方法、请求体、请求头等细节模拟响应mock responses以仿真后端行为让被测试代码拿到预期数据。这套机制让测试在完全脱离网络的条件下依然能够完整验证发什么请求、拿什么数据、怎么处理的整条链路。测试环境的搭建引入 HttpClientTestingModule要让测试拦截 HTTP 请求第一步是在测试模块中注入测试专用的提供者。Angular 提供了两种等价方式方式一NgModule 方式传统写法在 TestBed 的imports中引入HttpClientTestingModuleimport { TestBed } from angular/core/testing; import { HttpClientTestingModule } from angular/common/http/testing; beforeEach(() { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], }); });HttpClientTestingModule会替换掉真实的HttpClient后端实现使所有经由HttpClient发起的请求都被测试后端捕获而不会真正触网。方式二provideHttpClientTesting() 函数式写法现代写法从 Angular 15 开始HttpClient推荐通过provideHttpClient(...)系列函数提供。与之配套的测试提供者就是provideHttpClientTesting()import { TestBed } from angular/core/testing; import { provideHttpClient } from angular/common/http; import { provideHttpClientTesting } from angular/common/http/testing; beforeEach(() { TestBed.configureTestingModule({ providers: [ provideHttpClient(), // 启用 HttpClient 及其功能 provideHttpClientTesting(), // 用测试后端替换真实后端 ], }); });两者效果相同选择哪一种取决于项目的整体风格——如果你的应用主体采用provideHttpClient函数式提供常见于 standalone 应用测试中应保持一致的写法反之则使用HttpClientTestingModule。注入 HttpTestingControllerHttpTestingController是测试后端的遥控器负责查询、断言和刷新请求。它通过构造函数注入获取import { HttpTestingController } from angular/common/http/testing; let httpTestingController: HttpTestingController; beforeEach(() { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], }); httpTestingController TestBed.inject(HttpTestingController); }); afterEach(() { // 关键步骤验证没有遗漏的、未处理的请求 httpTestingController.verify(); });afterEach中的verify()是容易被新手忽略但极其重要的收尾动作它会断言测试期间没有未处理既未 flush 也未 match 掉的请求。若应用代码意外多发了请求而测试没有响应它verify()会抛出错误从而把漏网请求变成显式的测试失败。核心用法捕获请求、断言细节、模拟响应HttpTestingController提供的核心 API 如下表所示方法用途expectOne(url | matcher)断言恰好只有一个请求匹配给定的 URL 或匹配函数并返回该请求的句柄TestRequest若数量为 0 或多个则抛错match(url | matcher)返回所有匹配的请求数组不限制数量常用于并发请求或多请求场景TestRequest.flush(body, opts?)模拟服务器返回响应给出响应体可附加状态码与响应头TestRequest.error(error, opts?)模拟网络错误或 HTTP 错误响应controller.verify()断言所有请求都已处理无遗留请求典型流程示例测试一个 DataService假设有一个通过HttpClient拉取用户数据的服务// data.service.ts import { Injectable } from angular/core; import { HttpClient } from angular/common/http; import { Observable } from rxjs; export interface User { id: number; name: string; } Injectable({ providedIn: root }) export class DataService { constructor(private http: HttpClient) {} getUser(id: number): ObservableUser { return this.http.getUser(/api/users/${id}); } }对应的测试import { TestBed } from angular/core/testing; import { HttpClientTestingModule, HttpTestingController } from angular/common/http/testing; import { DataService } from ./data.service; describe(DataService, () { let service: DataService; let httpTestingController: HttpTestingController; beforeEach(() { TestBed.configureTestingModule({ imports: [HttpClientTestingModule], providers: [DataService], }); service TestBed.inject(DataService); httpTestingController TestBed.inject(HttpTestingController); }); afterEach(() { httpTestingController.verify(); }); it(should fetch a user and emit its data, () { const mockUser: User { id: 1, name: Ada }; let actualUser: User | undefined; // 触发请求订阅后 HttpClient 才会真正发出请求 service.getUser(1).subscribe(user (actualUser user)); // 断言恰好发出了一个指向目标 URL 的 GET 请求 const req httpTestingController.expectOne(/api/users/1); expect(req.request.method).toBe(GET); // 模拟后端返回响应体 req.flush(mockUser); // 验证订阅者收到了数据 expect(actualUser).toEqual(mockUser); }); });这段测试完整呈现了捕获 → 断言 → 模拟响应三步骤expectOne捕获并校验请求req.request.method断言 HTTP 动词req.flush(mockUser)让后端返回数据最终actualUser收到响应值。断言请求细节URL、方法、请求体、请求头TestRequest暴露了底层请求的完整信息可以对请求做细粒度断言it(should send POST with expected body and headers, () { const payload { name: New User }; service.createUser(payload).subscribe(); const req httpTestingController.expectOne(/api/users); // 断言 HTTP 动词 expect(req.request.method).toBe(POST); // 断言请求体 expect(req.request.body).toEqual(payload); // 断言请求头 expect(req.request.headers.get(Content-Type)).toBe(application/json); // 返回 201 创建成功并带上响应头 req.flush({ id: 2, name: New User }, { status: 201, statusText: Created, headers: { X-Trace-Id: abc-123 }, }); });flush的第二参数支持status状态码、statusText状态文本与headers响应头足以覆盖绝大多数后端行为的模拟。进阶场景场景一断言没有多余请求如果希望确认某个操作不会触发请求可以用expectNone类语义——但HttpTestingController本身不提供expectNone更常见的做法是结合match与verifyit(should not call the API when guard fails, () { service.loadIfAllowed(false).subscribe(); // match 返回匹配请求数组此处期望为空 const requests httpTestingController.match(/api/users); expect(requests.length).toBe(0); });场景二处理并发/多次请求当一次操作会发出多个请求例如多个并行加载expectOne会因为匹配到多个而抛错此时应使用matchit(should handle multiple parallel requests, () { service.loadDashboard().subscribe(); const requests httpTestingController.match(/api/stats); // 逐个模拟响应 requests[0].flush({ visits: 100 }); requests[1].flush({ sales: 42 }); // 断言数量符合预期 expect(requests.length).toBe(2); });场景三模拟错误响应与网络错误TestRequest还支持通过error()模拟失败路径用于测试错误处理逻辑import { HttpErrorResponse } from angular/common/http; it(should surface server errors, () { const errorSpy jasmine.createSpy(error); service.getUser(1).subscribe({ next: () fail(should not succeed), error: errorSpy, }); const req httpTestingController.expectOne(/api/users/1); // 模拟 HTTP 400 错误 req.flush(Not Found, { status: 404, statusText: Not Found }); // 或者模拟网络层错误如断网 // req.error(new ProgressEvent(network error)); expect(errorSpy).toHaveBeenCalled(); expect(errorSpy.calls.mostRecent().args[0]).toBeInstanceOf(HttpErrorResponse); });req.error(new ProgressEvent(network error))会以HttpErrorResponse的形式产生一个 status 为 0 的网络错误与真实断网场景一致。场景四结合 RxJS 延迟断言异步数据由于HttpClient方法返回的是Observable订阅回调是异步执行的需要借助 Jasmine 的fakeAsync/tick或waitForAsync来正确推进测试import { fakeAsync, tick } from angular/core/testing; it(should fetch user asynchronously, fakeAsync(() { let actualUser: User | undefined; service.getUser(1).subscribe(user (actualUser user)); const req httpTestingController.expectOne(/api/users/1); req.flush({ id: 1, name: Ada }); // 推进微任务队列让订阅回调执行 tick(); expect(actualUser).toEqual({ id: 1, name: Ada }); }));实际上flush会同步触发响应流多数简单场景无需tick但当响应之后还有delay、switchMap等 RxJS 操作符时fakeAsynctick是控制异步推进的必备手段。场景五使用匹配函数做灵活断言expectOne/match的第一个参数除了字符串 URL还可以是匹配函数便于对 URL 做正则或条件判断const req httpTestingController.expectOne( (r) r.url.startsWith(/api/users/) r.method GET ); expect(req.request.url).toBe(/api/users/1);这在 URL 带动态参数如查询串、ID 片段的场景下特别有用。在组件测试中使用 HttpTestingControllerHTTP 测试不只用于 Service 单测也常用于组件测试组件模板通过服务加载数据并渲染测试中通过HttpTestingController控制数据供给从而验证组件的渲染与交互。import { ComponentFixture, TestBed } from angular/core/testing; import { HttpClientTestingModule, HttpTestingController } from angular/common/http/testing; import { UserListComponent } from ./user-list.component; describe(UserListComponent, () { let fixture: ComponentFixtureUserListComponent; let httpTestingController: HttpTestingController; beforeEach(async () { await TestBed.configureTestingModule({ imports: [HttpClientTestingModule], declarations: [UserListComponent], }).compileComponents(); fixture TestBed.createComponent(UserListComponent); httpTestingController TestBed.inject(HttpTestingController); }); afterEach(() httpTestingController.verify()); it(should render users from the mocked backend, () { fixture.detectChanges(); // 触发 ngOnInit 中的请求 const req httpTestingController.expectOne(/api/users); req.flush([{ id: 1, name: Ada }, { id: 2, name: Grace }]); fixture.detectChanges(); // 触发变更检测渲染列表 const items fixture.nativeElement.querySelectorAll(.user-item); expect(items.length).toBe(2); }); });这里需要留意fixture.detectChanges()的调用时机第一次调用触发组件初始化进而发出请求flush返回数据后再次调用触发变更检测完成渲染——这正是捕获请求、断言、模拟响应三步骤在组件场景中的自然延伸。常见错误与调试技巧问题原因解决expectOne抛 Expected one matching request, found none请求尚未发出或 URL 不匹配确认已调用subscribe/fixture.detectChanges()核对 URL 与请求方法expectOne抛 Expected one matching request, found multiple匹配到了多个请求改用match并逐个处理verify()抛 Expected no open requests, found X存在未 flush 的请求在afterEach调用verify并确保每个请求都有对应的flush/error订阅回调未执行缺少异步推进使用fakeAsynctick或waitForAsync401/403 被吞掉应用内存在认证拦截器测试中同样提供拦截器HTTP_INTERCEPTORS后再断言与其他测试主题的衔接在 Angular 学习路线图中Testing Requests 是测试知识体系中的一环它与仓库内其他主题紧密关联Testing ServicesService 是最容易做单元测试的类在beforeEach中实例化、调用方法并断言结果当 Service 依赖HttpClient时就必须用本文的HttpTestingController来拦截请求Making Requests理解HttpClient各动词方法返回Observable的语义是写出正确请求断言的前提Writing Interceptors认证、日志、重试等拦截器同样需要测试HttpClientTestingModule会一并拦截经过拦截器链的请求HTTP Client 与 Observable PatternHttpClient的 Observable 流式语义决定了测试必须控制订阅时机与异步推进。总结Angular 官方测试请求的核心结论可以浓缩为三点一律 MockHttpClient是外部依赖测试必须通过angular/common/http/testing模拟后端杜绝真实网络调用三步走HttpTestingController.expectOne/match捕获并断言请求 → 检查req.request的 method/body/headers →req.flush/req.error模拟响应收尾必查afterEach中调用verify()确保没有任何未处理的请求泄漏到测试之外。掌握这套模式后无论是 Service 单测、组件集成测试还是拦截器测试你都能在毫秒级、零网络依赖的前提下完整验证应用与后端之间的每一个交互细节。赞分享文档教程知识库【免费下载链接】developer-roadmapInteractive roadmaps, guides and other educational content to help developers grow in their careers.项目地址https://gitcode.com/GitHub_Trending/de/developer-roadmap点击查看免费下载相关推荐5个技巧打破传统监控局限Frigate NVR的本地AI检测革命5个技巧打破传统监控局限Frigate NVR的本地AI检测革命 还在忍受云端监控的延迟、隐私泄露和昂贵订阅费吗Frigate NVR用本地化AI检测技术重人工智能计算机视觉音视频Angular HTTP Client 实战指南掌握 angular/common/http 中的 HttpClient 服务Angular HTTP Client 实战指南掌握 angular/common/http 中的 HttpClient 服务 导读 在现代 Angular文档教程知识库Notepad--终极打印指南告别混乱排版掌握专业PDF输出技巧Notepad 终极打印指南告别混乱排版掌握专业PDF输出技巧 你是否曾为文本编辑器的打印效果而烦恼代码格式混乱、中文显示异常、页面布局不美观Notep桌面应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考