错误：<spyOn>：open() 方法不存在

Question

大家好，我正在尝试测试一个函数，但我在标题上一直有这个错误，有时它告诉我我已经使用了间谍，我不知道为什么，因为我认为我已经实现了所有需要的函数单元测试，所以有人可以帮助我。

我可以在不使用spyOn 的情况下测试弹出窗口吗？

组件.ts

//methode that open popup 
openMulti(): void {
  this.dialogRef.close();
  this.authService.playerName = this.userName.nativeElement.value;
  const dialogConfig = new MatDialogConfig();

  dialogConfig.disableClose = true;
  dialogConfig.autoFocus = true;

  this.dialog.open(MultiComponent, dialogConfig);
}

submitForm(): void {
  this.authService.playerName = this.userName.nativeElement.value;
  if (this.login()) {
    if (this.inputMulti.nativeElement.checked) {
      this.openMulti();
    } else if (this.inputSolo) {
      this.closePop();
      this.router.navigate(['/game']);
    }
  }
}

component.spec.ts

fdescribe('LoginComponent', () => {
  let component: LoginComponent;
  //let multicomponent : MultiComponent;
  let fixture: ComponentFixture < LoginComponent > ;
  let dialogRefServiceSpy: jasmine.SpyObj < MatDialogRef < LoginComponent >> ;
  let communicationServiceSpy: SpyObj < CommunicationService > ;
  let nameValidationSpy: jasmine.Spy < any > ;
  const dialogRefSpyObj = jasmine.createSpyObj({
    afterClosed: of ({}),
    close: null
  });
  dialogRefSpyObj.componentInstance = {
    body: ''
  };

  const mockDialogRef = {
    open: jasmine.createSpy('openMulti'),
  };
  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [MatDialogModule],
      providers: [],
    });

  });

  beforeEach(async () => {
    communicationServiceSpy = jasmine.createSpyObj('ExampleService', ['basicGet', 'basicPost']);
    communicationServiceSpy.basicGet.and.returnValue( of ({
      title: '',
      body: ''
    }));
    communicationServiceSpy.basicPost.and.returnValue( of ());
    dialogRefServiceSpy = jasmine.createSpyObj({
      afterClosed: of ({
        subscribe: jasmine.createSpy
      }),
      close: null
    });

    await TestBed.configureTestingModule({
      declarations: [LoginComponent],
      imports: [MatDialogModule, ReactiveFormsModule, RouterTestingModule, AppRoutingModule, HttpClientTestingModule],
      providers: [
        LoginComponent,
        {
          provide: MatDialog,
          useValue: {}
        },
        {
          provide: MatDialogRef,
          useValue: dialogRefServiceSpy,
          mockDialogRef
        },
        {
          provide: MAT_DIALOG_DATA,
          useValue: {}
        },
        {
          provide: CommunicationService,
          useValue: communicationServiceSpy
        },
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
  it('should call function close', () => {
    component.closePop();
    expect(dialogRefServiceSpy.close).toHaveBeenCalled();
  });
  it('should call window alert with specific message when validateName is called and name is invalid', () => {
    window.alert = jasmine.createSpy().and.callFake(() => {});
    component.nameValidation('player1');
    expect(window.alert).not.toHaveBeenCalledWith('player1');
  });
  it('should not call window alert with specific message when validateName is called and name is valid', () => {
    window.alert = jasmine.createSpy().and.callFake(() => {});
    component.nameValidation('');
    expect(window.alert).not.toHaveBeenCalledWith('');
    expect(component.nameValidation('')).toBe(true);
  });
  //this test method telle me that open() dosent exist 
  fit('openMulti test', () => {
    // jasmine.getEnv().allowRespy(true);
    const openDialogSpy = spyOn(component.dialog, 'open');
    const fakeDialogConfig = new MatDialogConfig();
    component.openMulti();
    expect(openDialogSpy).toHaveBeenCalledWith(ParamGameComponent, fakeDialogConfig);
  });
});

我总是遇到错误，我将它与其他功能一起使用没有问题

Answer 1

在配置测试模块时，您提供了一个空对象而不是真正的 MatDialog。此对象没有open() 方法。

而不是...

providers: [
  LoginComponent,
  {
    provide: MatDialog,
    useValue: {}
  },
  ...

...试试这个：

providers: [
  LoginComponent,
  MatDialog,
  ...