Angular 单元测试用例服务方法

Question

问题：当我运行服务文件的单元测试用例时，它说

'Spec 'MerchantsService getMerchantData' 没有预期。' 而不是显示 console.log，请帮忙。提前致谢。

下面是我的服务文件，包含

  getMerchantData(searchParams: any): Observable<any> {
    return this.http.get(`${this.baseUrl}/merchants-data-url${searchParams}`)
  }

以下是服务的规范文件。

import { async, inject, TestBed } from '@angular/core/testing'
import { MerchantsService } from './merchants.service'
import { HttpClientTestingModule } from '@angular/common/http/testing'
import { ReactiveFormsModule, FormsModule } from '@angular/forms'

describe('MerchantsService', () => {
  let service: MerchantsService

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, ReactiveFormsModule, FormsModule],
    })
    service = TestBed.inject(MerchantsService)
  })

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

  it('getMerchantData', async() => {
    service.getMerchantData('?page=1').subscribe((res) => {
      console.log('getMerchantData', res.data)
      expect(res.data.length).toBeGreaterThan(0)
    })
  })
})

Answer 1

我认为这是因为你的方法 'getMerchantData' 在任何期望完成之前就已经完成了。您的订阅回调不会在方法结束时执行。

你应该这样尝试：

it('getMerchantData', (done) => {
    service.getMerchantData('?page=1').subscribe((res) => {
       console.log('getMerchantData', res.data)
       expect(res.data.length).toBeGreaterThan(0)
       done()
    })
})

顺便说一句，你还有另一个问题，你应该像 AliF50 在他的回复中所说的那样模拟 http 响应：

您应该阅读如何测试异步测试：

Answer 2

您需要测试 http 调用并进行模拟响应。

试试这个：

import { async, inject, TestBed } from '@angular/core/testing'
import { MerchantsService } from './merchants.service'
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'
import { ReactiveFormsModule, FormsModule } from '@angular/forms'

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, ReactiveFormsModule, FormsModule],
    })
    service = TestBed.inject(MerchantsService);
    httpTestingController = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    // after each test, verify no outstanding api calls remain
    httpTestingController.verify();
  });

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

  it('getMerchantData', () => {
    const mockMerchantData = {
      data: [{ id: 1 }, { id: 2 }], // mock your response to whatever you want
    };
    service.getMerchantData('?page=1').subscribe((res) => {
      console.log('getMerchantData', res.data)
      expect(res.data.length).toBeGreaterThan(0)
    });
    // you have to know your Base URL and put it in the placeholder below
    const req = httpTestingController.expectOne(`${BASE_URL_HERE}/merchants-data-url?page=1`);
    expect(req.request.method).toEqual('GET'); // expect a get request
    req.flush(mockMerchantData); // give this response to the API call in queue
  });
})

您应该阅读有关如何在 Angular 中测试 HTTP 调用的 this 文章。

Angular 单元测试用例服务方法

Angular unit test cases service method

javascript

unit-testing

karma-jasmine

angular