Angular: 在单元测试中模拟 HttpClient

Question

我有一项服务使用 httpClient 我想测试：

@Injectable({
    providedIn: 'root'
})
export class TodolistService {

  constructor(private http: HttpClient) { }

  getTodoLists(): Observable<HttpResponse<TodoList[]>> {
    return this.http.get<TodoList[]>("https://localhost:44305/todolist", { observe: 'response' });
  }
}

我的单元测试设置如下所示：

import { TestBed, getTestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { TodolistService } from './todolist.service';

describe('TodolistService', () => {
  let injector: TestBed;
  let service: TodolistService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientTestingModule ],
      providers: [ TodolistService ]
    });

    injector = getTestBed();
    service = injector.get(TodolistService);
    httpMock = injector.get(HttpClientTestingModule);
  });

  afterEach(() => {
    httpMock.verify();
  });

  describe('#getTodoLists', () => {
    it('should return an Observable<TodoList[]>', () => {
      const dummyTodoLists = [ 
        { name: "todoList1", listItems: [{id: 1, description: "listitem1-1", done: false}, {id: 2, description: "listitem1-2", done: false}]},
        { name: "todoList2", listItems: [{id: 2, description: "listitem2-1", done: false}, {id: 4, description: "listitem2-2", done: false}]}
      ];
  
      service.getTodoLists().subscribe(todoLists => {
        expect(todoLists.body.length).toBe(2);
        expect(todoLists.body).toEqual(dummyTodoLists);
      });
  
      const req = httpMock.expectOne("https://localhost:44305/todolist");
      expect(req.request.method).toBe("GET");
      req.flush(dummyTodoLists);
    });
  });
});

不幸的是，测试失败并显示以下消息，我无法让它工作：

TodolistService > #getTodoLists > should return an Observable<TodoList[]>
TypeError: httpMock.expectOne is not a function

我做错了什么？

提前致谢

Answer 1

尝试在 beforeEach

中将 HttpClientTestingModule 更改为 HttpTestingController

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientTestingModule ],
      providers: [ TodolistService ]
    });

    injector = getTestBed();
    service = injector.get(TodolistService);
    httpMock = injector.get(HttpTestingController); // <-- here
  });

Angular: 在单元测试中模拟 HttpClient

Angular: Mocking of HttpClient in Unit Test

unit-testing

karma-jasmine

angular

angular-unit-test