比较异步函数内部的数据时，Angular HttpClient 单元测试不会失败答案

【问题标题】：Angular HttpClient unit tests won't fail when comparing data inside of an asynchronous function比较异步函数内部的数据时，Angular HttpClient 单元测试不会失败
【发布时间】：2019-01-22 23:58:47
【问题描述】：

我正在尝试对一些简单的 GET 请求进行单元测试，但无论我做什么，我都无法让测试失败。

如果我将('GET') 更改为('POST') 会失败，但无论如何所有的api 数据都会通过。

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

import { mockPhoneNumbers } from '../mocks/data/phoneNumbers.mock';
import { PhoneNumberApiService } from './phone-number-api.service';

describe('PhoneNumberApiService', () => {
  let service: PhoneNumberApiService;
  let httpTestingController: HttpTestingController;

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

    service = TestBed.get(PhoneNumberApiService);
    httpTestingController = TestBed.get(HttpTestingController);
  });

  afterEach(() => {
    // After every test, assert that there are no more pending requests.
    httpTestingController.verify();
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should get the phone numbers successfully', () => {
    service
      .getPhoneNumbers()
      .subscribe(phoneNumbers => {
        expect(phoneNumbers).toEqual('bob');
        expect(phoneNumbers[0].id).toEqual('b8bfea4d-a26f-9e4e-cbd4-39eb69cdaa58');
        expect(phoneNumbers[1].friendlyName).toEqual('Dev Test');
      });

    const req = httpTestingController.expectOne('phoneNumbers');

    expect(req.request.method).toEqual('GET');

    req.flush(mockPhoneNumbers);
  });

  it('should get the phone number details successfully', () => {
    const { id: phoneNumberId } = mockPhoneNumbers[0];

    service
      .getPhoneNumberDetails(phoneNumberId)
      .subscribe(phoneNumber => expect(phoneNumber).toEqual(mockPhoneNumbers[0]));

    const req = httpTestingController.expectOne(`phoneNumbers/${phoneNumberId}`);

    expect(req.request.method).toEqual('GET');

    req.flush('bob');
  });
});

肯定用模拟数据刷新请求，然后期望模拟数据为bob 是错误的。在底部测试中，使用bob 刷新请求并期望数据等于数组中的第一个电话号码应该会失败。

【问题讨论】：

订阅中的断言仅在测试通过之后发生。阅读 DoneFn，它在 angular.io/guide/testing 中有介绍
此示例与 Angular 文档中用于测试 HttpClient 的示例基本相同。他们是否忘记包含某些内容？
好的，所以添加 done 似乎会导致测试失败。我想知道这是否与使用 jest vs karma 有关。

标签： angular unit-testing angular-httpclient

【解决方案1】：

关于你的测试的问题是你让你的“它”功能和期望异步没有明确告诉茉莉花。

您需要在 other 中使用 done 函数来告诉测试正在等待某些东西（查看 here 一个关于 jasmine 异步测试的好教程）

根据您的代码进行示例：

...
//Receive the done function like this
it('should get the phone numbers successfully', (done) => {
    service
      .getPhoneNumbers()
      .subscribe(phoneNumbers => {
        expect(phoneNumbers).toEqual('bob');
        expect(phoneNumbers[0].id).toEqual('b8bfea4d-a26f-9e4e-cbd4-39eb69cdaa58');
        expect(phoneNumbers[1].friendlyName).toEqual('Dev Test');
        //Tell the test that only in here all the work was done
        done();
      });
    const req = httpTestingController.expectOne('phoneNumbers');

    expect(req.request.method).toEqual('GET');

    req.flush(mockPhoneNumbers);
});
....

另外，回答your guess，jest 是一个测试运行器，构建在 jasmine 框架之上（意味着 jest 语法类似于 jasmin，但不相等）。但是对于这种情况，我想使用 done 可以解决您的问题。

【讨论】：