Question

我有一个棱角分明的应用程序，我从karma更改为jest，因为因果报应让我很头疼，我还需要快照测试，所以我有一个像这样的测试： / p>

  it('should have show and have a list of 2 elements', async () => {
    spyOn(notificationService, 'getNotifications').and.returnValue(notificationData);
    fixture.detectChanges();
    expect(fixture).toMatchSnapshot();
    // TODO: fix this test. there is something wrong that we can not find the `.url-link`
    const fakeUrl = fixture.debugElement.query(By.css('.url-link'));

    expect(fakeUrl).toBeTruthy(); // this fails.

但是如果我们看到它从灯具中取出的napshot，我们可以看到：

// Jest Snapshot v1

exports[`NotificationsComponent should have show and have a list of 2 elements 1`] = `
<app-notifications
  current="0"
  display={[Function Notification]}
  lastLevel={[Function String]}
  list={[Function Array]}
  navigationService={[Function NavigationService]}
  notificationService={[Function NotificationsService]}
>
  <mat-toolbar class="pl-md-5 mat-toolbar info show mat-toolbar-single-row">
    <span tabindex="0">
      <span class="url-link">
        Click here                <---- here is the wanted item
      </span>
       to get verified
    </span>
  </mat-toolbar>
</app-notifications>
`;

但是我的测试始终失败：

NotificationsComponent › should have show and have a list of 2 elements

    expect(received).toBeTruthy()

    Received: null
    > 45 |     expect(fakeUrl).toBeTruthy();

有人知道为什么会这样吗？在我的组件中，我有这个：

<mat-toolbar class="pl-md-5" [ngClass]="notificationClass">
  <span [routerLink]="display?.link?.url" [innerHTML]="getMessage()"></span>
</mat-toolbar>

其中getMessage有时返回string或有时它返回带有链接的span（如快照）：

更新：如果我这样做：

fixture.debugElement.query(By.css('mat-toolbar'));

它可以工作，但可以这样做：

fixture.debugElement.query(By.css('mat-toolbar span'));
fixture.debugElement.query(By.css('mat-toolbar .url-link'));
fixture.debugElement.query(By.css('span'));

不是

测试无法使用By.css查找元素

0 个答案: