Utilice este código de ejecución de extremo a extremo para la resolución de todos sus problemas.

archivo especificaciones.ts -

 import { HttpClientTestingModule, HttpTestingController } from "@angular/common/http/testing"; import { TestBed, async, ComponentFixture } from "@angular/core/testing"; import { RouterTestingModule } from "@angular/router/testing"; import { AppComponent } from "./app.component"; describe("AppComponent", () => { let component: AppComponent; let fixture: ComponentFixture<AppComponent>; let httpTestingController: HttpTestingController; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule, HttpClientTestingModule, ], declarations: [AppComponent], }).compileComponents(); })); beforeEach(() => { fixture = TestBed.createComponent(AppComponent); component = fixture.componentInstance; httpTestingController = TestBed.inject(HttpTestingController) fixture.detectChanges(); }); it('#getRolesAsync should return expected data', async (done) => { const expectedData = { userId: 1, id: 1, title: "delectus aut autem", completed: false }; (await component.getData()).subscribe(data => { expect(data).toEqual(expectedData); done(); }); const testRequest = httpTestingController.expectOne('https://jsonplaceholder.typicode.com/todos/1'); testRequest.flush(expectedData); }); });

archivo componente.ts -

 import { Component } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Observable } from "rxjs"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"], }) export class AppComponent { data: any; constructor(private http: HttpClient) { } async getData(): Promise<Observable<any>> { const roles = await this.http.get<any>('https://jsonplaceholder.typicode.com/todos/1'); return this.data = roles; } }