Angular中HttpResource的Jasmine单元测试失效，求解决方法

问题场景 #

我非常喜欢Angular全新的HttpResource，它实现了我期盼已久的诸多功能，能极大提升开发效率。但在使用Jasmine对HttpResource进行单元测试时遇到问题，以下测试代码无法正常运行：

fit('should call the expected URL', () => {
        TestBed.runInInjectionContext(() => {
            const resource = service.fetchSettings(); //httpResourceRef
            resource.reload();
            const req = httpMock.expectOne(`${environment.baseUrls.api.wellcomm}/1.0/cluster/getPendingSettings`); //HttpTestingController
            expect(req.request.method).toBe('GET');
            req.flush({});
        });
    });

本以为这段代码会触发请求使测试通过，但实际并未生效。我知道这与组件读取数据的方式有关，但该如何模拟这种行为？难道每次使用都要构建一个读取并渲染数据的组件吗？

解决方案 #

HttpResource的请求是惰性触发的：只有当你订阅它的data$流（或者使用依赖该数据流的方法）时，才会实际发起HTTP请求。你当前只调用了reload()，但没有订阅数据，所以请求不会执行。

不需要构建测试组件，只需在测试中模拟组件订阅数据的行为即可，有两种常用方式：

1. 直接订阅数据流触发请求

在调用reload()后，订阅resource.data$即可触发请求：

fit('should call the expected URL', () => {
    TestBed.runInInjectionContext(() => {
        const resource = service.fetchSettings();
        // 订阅data$触发请求
        resource.data$.subscribe();
        resource.reload();
        
        const req = httpMock.expectOne(`${environment.baseUrls.api.wellcomm}/1.0/cluster/getPendingSettings`);
        expect(req.request.method).toBe('GET');
        req.flush({});
    });
});

2. 使用take(1)避免内存泄漏（推荐）

如果不想让订阅长期存在，可以用RxJS的take(1)操作符，确保订阅获取一次数据后自动取消：

import { take } from 'rxjs';

fit('should call the expected URL', () => {
    TestBed.runInInjectionContext(() => {
        const resource = service.fetchSettings();
        // 仅订阅一次数据，避免测试后内存泄漏
        resource.data$.pipe(take(1)).subscribe();
        resource.reload();
        
        const req = httpMock.expectOne(`${environment.baseUrls.api.wellcomm}/1.0/cluster/getPendingSettings`);
        expect(req.request.method).toBe('GET');
        req.flush({});
    });
});

这两种方式都模拟了实际组件中使用HttpResource的逻辑（比如组件模板用asyncPipe自动订阅data$），不需要额外构建测试组件。

内容的提问来源于stack exchange，提问作者SolidShook