Angular 测试中 fakeAsync 和 async 有什么区别

Angular 测试中的 fakeAsync 与 async：区别与应用

typescript
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { MyService } from './my.service';
describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture;
  let myService: MyService;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [MyService],
    });
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    myService = TestBed.inject(MyService);
  });
  it('should fetch data successfully', fakeAsync(() => {
    const responseData = 'Test Data';
    // 模拟异步调用
    const fetchDataSpy = spyOn(myService, 'fetchData').and.returnValue(Promise.resolve(responseData));
    // 触发组件中的异步操作
    component.fetchData();
    // 立即执行所有挂起的异步操作
    tick();
    // 断言数据已成功获取并更新组件状态
    expect(component.data).toEqual(responseData);
    expect(fetchDataSpy).toHaveBeenCalled();
  }));
});

typescript
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { MyService } from './my.service';
describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture;
  let myService: MyService;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [MyService],
    });
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    myService = TestBed.inject(MyService);
  });
  it('should fetch data successfully', waitForAsync(async () => {
    const responseData = 'Test Data';
    // 模拟异步调用
    const fetchDataSpy = spyOn(myService, 'fetchData').and.returnValue(Promise.resolve(responseData));
    // 触发组件中的异步操作
    await component.fetchData();
    // 断言数据已成功获取并更新组件状态
    expect(component.data).toEqual(responseData);
    expect(fetchDataSpy).toHaveBeenCalled();
  }));
});