Angular Jasmine 测试：预期是间谍，但未定义答案

【问题标题】：Angular Jasmine test : Expected a spy, but got undefinedAngular Jasmine 测试：预期是间谍，但未定义
【发布时间】：2021-06-14 00:11:34
【问题描述】：

我在 Angular 中使用材质对话框并编写测试来测试对话框的关闭我收到错误预期是间谍，但未定义。在测试中出现错误 fit('应该调用函数关闭对话框'

describe('XYZDetailsComponent', () => {
  let component: XYZDetailsComponent;
  let fixture: ComponentFixture<XYZDetailsComponent>;

  const data = {
    ip: '1.1.1.1',
    name: 'test'
 }

  const setupComponent = () => {
    fixture = TestBed.createComponent(XYZDetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  };

  beforeEach(() => {

    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, MatDialogModule ],
      declarations: [XYZDetailsComponent],

      providers: [
        { provide: MatDialogRef, useFactory: () => jasmine.createSpyObj('MatDialogRef', ['close', 'afterClosed']) },
        {provide: MAT_DIALOG_DATA, useValue: data},
       ]
    })
    .compileComponents();
  });

  it('should create', () => {
    setupComponent();
    expect(component).toBeTruthy();
  });

  fit('should call the function to close the dialog', () => {
    setupComponent();
    component.onNoClick();
    expect(component.dialogRef.close()).toHaveBeenCalled();
  });
});

【问题讨论】：

标签： angular jasmine

【解决方案1】：

我认为您需要从外部（来自测试）而不是从组件获取MatDialogRef 的句柄。

试试这个，请用你的类型替换anys：

describe('XYZDetailsComponent', () => {
  let component: XYZDetailsComponent;
  let fixture: ComponentFixture<XYZDetailsComponent>;
  // add this line
  let mockDialogRef: jasmine.SpyObj<any>;

  const data = {
    ip: '1.1.1.1',
    name: 'test'
 }

  const setupComponent = () => {
    fixture = TestBed.createComponent(XYZDetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  };

  beforeEach(() => {
    // assign the variable to spy object before each test
    // This ensures we get fresh spies for each test
    mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close', 'afterClosed']);
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule, MatDialogModule ],
      declarations: [XYZDetailsComponent],

      providers: [
        // modify this line
        { provide: MatDialogRef, useValue: mockDialogRef ,
        {provide: MAT_DIALOG_DATA, useValue: data},
       ]
    })
    .compileComponents();
  });

  it('should create', () => {
    setupComponent();
    expect(component).toBeTruthy();
  });

  fit('should call the function to close the dialog', () => {
    setupComponent();
    component.onNoClick();
    // alter this line
    expect(mockDialogRef.close).toHaveBeenCalled();
  });
});

【讨论】：