开玩笑测试 Angular 6 服务答案

【问题标题】：Jest testing Angular 6 Service开玩笑测试 Angular 6 服务
【发布时间】：2019-01-08 01:16:55
【问题描述】：

你好我有点卡在这里所以我决定打开这个问题，

我正在尝试使用 Jest 测试服务。但是所有测试都通过了，即使他们不应该通过。

这是软件版本：

Angular v6.0.1 RxJs v6.2.1 玩笑 v23.1.0

我的服务看起来像这样（此时应该很简单）：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

import { BaseApiService } from './base-api.service';

@Injectable({ providedIn: 'root' })
export class ListsService extends BaseApiService {
  private static readonly LISTS_API = 'http://localhost:3000/lists';
  constructor(protected httpClient: HttpClient) {
    super();
  }
  public list(): Observable<BasicList[]> {
    return this.httpClient
      .get<BasicList[]>(ListsService.LISTS_API, BaseApiService.httpOptions)
      .pipe(map((res: Response) => res.json()));
  }
}

实际上，我确实有两个测试，目的相同，因为我在阅读article 时试图了解如何在没有测试平台的情况下进行测试，所以这是使用 TestBed 进行的测试：

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

import { ListsService } from './lists.service';

const basicListData = [
  {
    id: 1,
    name: "name 1"
  },
  {
    id: 2,
    name: "name 2"
  }
];

describe('Service: List Service', () => {
  let httpMock: HttpTestingController;
  let service: ListsService;

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

  beforeEach(inject([ListsService, HttpTestingController], (_service, _httpMock) => {
    service = _service;
    httpMock = _httpMock;
  }));

  it('list: should return a sorted list', () => {
    service.list().subscribe(lists => {
      expect(lists.length).toBe(2);
    });

    const req = httpMock.expectOne('http://localhost:3000/lists');
    req.flush(basicListData);
    httpMock.verify();
  });
});

问题来自expect.ToBe(2) 表达式。因为我写在那里的数字根本不重要。它只是觉得没问题。即使你只写 1000 或 0。而且我知道我可能会遗漏一些东西，但无法弄清楚。

这也是相同的测试，但没有测试台：

import { of } from 'rxjs';

import { ListsService } from './lists.service';

const basicListData = [
  {
    id: 1,
    name: "name 1"
  },
  {
    id: 2,
    name: "name 2"
  }
];

const provide = (mock: any): any => mock;

describe('Service: Lists', () => {
  let listsService: ListsService;

  const http = { get: jest.fn(() => of(basicListData)) };
  beforeEach(() => {
    listsService = new ListsService(provide(http));
  });

  it('list$: Should return a list of List definitions', () => {
    listsService.list().subscribe(lists => {
      expect(http.get).toBeCalledWith('http://localhost:3000/lists');
      expect(lists.length).toBe(3);
    });
  });
});

在这个甚至不是正在检查的端点上，所以事件在那里丢失了一点。

提前感谢任何形式的帮助，我希望问题得到正确解释。

【问题讨论】：

标签： angular typescript rxjs observable jestjs

【解决方案1】：

似乎您需要在这里使用断言。由于操作是异步的，因此您的测试通过了，因为案例在调用回调之前执行。因此，永远不会调用“期望”。你可以尝试在这样调用断言后返回一个承诺：

it('list$: Should return a list of List definitions', () => {
    expect.assertions(1);
    return listsService.list().toPromise().then(
      lists => {
        expect(http.get).toBeCalledWith('http://localhost:3000/lists');
        expect(lists.length).toBe(3);
      });
  });

【讨论】：

【解决方案2】：

我也遇到了同样的问题，为了解决这个问题，我已经完成了。测试在订阅完成之前执行，并且完成强制它等待。

 it('list$: Should return a list of List definitions', (done) => {
    listsService.list().subscribe(lists => {
      expect(http.get).toBeCalledWith('http://localhost:3000/lists');
      expect(lists.length).toBe(3);

done();

    });
  });

【讨论】：