如何解决Angular单元测试中的InvalidPipeArgument 'AsyncPipe‘错误？

import { TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { MyService } from './my.service';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let myService: MyService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [MyService]
    });

    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    myService = TestBed.inject(MyService);
  });

  it('should display data asynchronously', fakeAsync(() => {
    const testData = 'Test Data';
    spyOn(myService, 'getData').and.returnValue(Promise.resolve(testData));

    fixture.detectChanges();
    tick(); // 等待异步操作完成

    expect(component.data).toBe(testData);
    expect(fixture.nativeElement.querySelector('.data').textContent).toBe(testData);
  }));
});

import { TestBed, ComponentFixture, async } from '@angular/core/testing';
import { MyComponent } from './my.component';
import { MyService } from './my.service';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;
  let myService: MyService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [MyService]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    myService = TestBed.inject(MyService);
  });

  it('should display data asynchronously', async(() => {
    const testData = 'Test Data';
    spyOn(myService, 'getData').and.returnValue(Promise.resolve(testData));

    fixture.detectChanges();

    fixture.whenStable().then(() => {
      expect(component.data).toBe(testData);
      expect(fixture.nativeElement.querySelector('.data').textContent).toBe(testData);
    });
  }));
});