Angular HeadlessChrome Karma测试-无法读取null的属性“innerText”

我对以下组件的测试一直失败，并显示错误消息：

HeadlessChrome 78.0.3882 (Windows 10.0.0) LoginButtonGroupComponent : should have option to sign in with Google FAILED
    Failed: Cannot read property 'innerText' of null

但是，它通过了“应具有使用电子邮件地址登录的选项”测试。你知道怎么了吗

试验

组成部分

---

我认为这个按钮在测试运行的时候并不存在，因为您使用异步管道呈现它。 尝试使用detectChanges，也许这将帮助您：

它“应该有使用Facebook登录的选项”，异步=>{ 组件=fixture.componentInstance； 组件。ngonit； 夹具。检测变化； expectdocument.getElementById'facebookSignIn'。innerText.trim.toBe'Sign with Facebook'；

---

};谢谢遗憾的是，这不起作用。我收到了相同的错误消息。也许，问题出在选择器上。您可以尝试以另一种方式获取元素：fixture.detectChanges；const de=fixture.debugElement.queryBy.css'facebookSignIn'；expectde.nativeElement.innerText.toEqual'sds'；为什么呢我已经在组件中正确设置了id和文本，因为*ngIf？如何通过异步管道将isMobile异步设置为false isMobile-get，以便在测试运行时不初始化该值。渲染组件时，必须尝试选择此选项。对我来说，改变是有效的。您也可以尝试：fixture.whenStable.then=>{fixture.detectChanges；expect.toBe}

import { LoginButtonGroupComponent } from './login-button-group.component';
import { FormsModule } from '@angular/forms';
import { async, inject, TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestStore } from '../../../core/core.spec';
import { State } from '../../../core/store/auth/auth.reducer';
import { Store } from '@ngrx/store';

describe('LoginButtonGroupComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [FormsModule],
      providers: [
        { provide: Store, useClass: TestStore }
      ],
      declarations: [LoginButtonGroupComponent]
    }).compileComponents().then(() => {
    });
  }));
  describe(':', () => {
    let fixture, app;
    let store: TestStore<State>;

    beforeEach((inject([Store], (testStore: TestStore<State>) => {
      store = testStore;
      store.setState({user: null, error: null});
      fixture = TestBed.createComponent(LoginButtonGroupComponent);
      app = fixture.debugElement.componentInstance;
    })));

    afterEach(() => {
      fixture.destroy();
      app = null;
    });

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

    it('should have option to sign in with Google', async(() => {
      expect(document.getElementById('googleSignIn').innerText.trim()).toBe('Sign in with Google');
    }));

    it('should have option to sign in with Facebook', async(() => {
      expect(document.getElementById('facebookSignIn').innerText.trim()).toBe('Sign in with Facebook');
    }));

    it('should have option to sign in with email address', async(() => {
      expect(document.getElementById('emailSignIn').innerText.trim()).toBe('or use your email address');
    }));
  });
});

<p [ngClass]="setButtonAlignment(position)">
  <button (click)="googleSignIn()" *ngIf="!(isMobile | async)?.matches" class="btn btn-label btn-google"
          type="button">
    <label id="googleSignIn">
      <fa-icon [icon]="['fab', 'google']" size="xs"></fa-icon>
    </label> Sign in with Google
  </button>
  <button (click)="mobileGoogleSignIn()" *ngIf="(isMobile | async)?.matches" class="btn btn-label btn-google"
          type="button">
    <label id="mobileGoogleSignIn">
      <fa-icon [icon]="['fab', 'google']" size="xs"></fa-icon>
    </label> Sign in with Google
  </button>
  <button (click)="facebookSignIn()" *ngIf="!(isMobile | async)?.matches" class="btn btn-label btn-facebook"
          type="button">
    <label id="facebookSignIn">
      <fa-icon [icon]="['fab', 'facebook-f']" size="xs"></fa-icon>
    </label> Sign in with Facebook
  </button>
  <button (click)="mobileFacebookSignIn()" *ngIf="(isMobile | async)?.matches" class="btn btn-label btn-facebook"
          type="button">
    <label id="mobileFacebookSignIn">
      <fa-icon [icon]="['fab', 'facebook-f']" size="xs"></fa-icon>
    </label> Sign in with Facebook
  </button>
</p>
<p [ngClass]="setButtonAlignment(position)">
  <small>
    <a class="text-muted small-2" id="emailSignIn" routerLink="/register">or use your email address&nbsp;&nbsp;<fa-icon
      [icon]="['fas', 'long-arrow-alt-right']" size="xs"></fa-icon>
    </a>
  </small>
</p>