具有方法和属性的 Jasmine 模拟提供者 Angular 9

Question

我正在尝试模拟 angularx-social-login npm 包。我想要的只是默认应该创建测试以通过。在我的测试规范中，我有：

  let component: Component;
  let fixture: ComponentFixture<Component>;
  let spy;

  beforeEach(async(() => {
    spy = jasmine.createSpyObj('SocialAuthService', ['signIn', 'signOut'], ['authState']);
    TestBed.configureTestingModule({
      declarations: [
        Component
      ],
      providers: [
        { provide: SocialAuthService, useValue: spy }
      ]
    })
      .compileComponents();
  }));

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

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

使用此代码，我收到无法读取属性订阅未定义的错误。这是预料之中的，因为我还没有为 authState 设置订阅，因为在我的组件中我有这个：

this.socialAuthService.authState;

以上returns可观察。但是当我然后在每个之前的第一行添加这行代码时：

spy.authState.and.returnValue(of());

它说无法读取属性并且未定义。在网上做了一些研究后，我可以看到很多建议是使用 spyOnProperty，但是当我使用 spyOnProperty(spy, 'authState', 'get'); 之类的东西时，我收到错误 Failed:: authState is not declared configurable。我不太确定如何处理这个问题，我们将不胜感激。

Answer 1

我认为您使用 jasmine.createSpyObj 不正确。它只需要 2 个参数，而不是三个。

第一个参数是间谍的字符串名称，第二个参数是您要模拟的 public 方法的数组。看到你有this.socialAuthService.getAuthState()，你需要在第二个参数中添加getAuthState。

试试这个：

 let component: Component;
  let fixture: ComponentFixture<Component>;
  let spy;

  beforeEach(async(() => {
    // add all other public properties required into the second argument inside of the array ** in this case remove it since you don't need it
    spy = jasmine.createSpyObj('SocialAuthService', []);
    TestBed.configureTestingModule({
      declarations: [
        Component
      ],
      providers: [
        { provide: SocialAuthService, useValue: spy }
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    // I am not sure when you require the value but let's assume you need it in the ngOnInit
   // so we have to put it here
    // spy.getAuthState.and.returnValue(of(null)); // now we are mocking the return value of getAuthState, ** comment out this line, you don't need it
    spy.authState = of(null); // ** mock it to what you would like here
    fixture.detectChanges();
  });

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

具有方法和属性的 Jasmine 模拟提供者 Angular 9

Jasmine Mocking Provider with Method and Properties Angluar 9

unit-testing

jasmine

typescript

karma-jasmine

angular