Angular 组件中的 setTimeout() 调用导致测试中出现控制台错误，即使测试通过了

Question

我正在测试 a 标签的 Angular 7 中的点击操作

这是我组件中的 a 标签标记

<div id="region-start" class="timeline-region">
    <div class="row">
      <div class="col-12 col-md-4">
        <a class="timeline-region-heading" [ngClass]="{'timeline-region-active':activeStart}" [routerLink]="" (click)="showRegionAndVisit(true, 'start', 0)">Start</a>
      </div>
    </div>
</div>

这是测试

it('should display a start date', () => {

    var startHeading = fixture.nativeElement.querySelector('#region-start a.timeline-region-heading');

    startHeading.click();  // This will display the start visit details box

    fixture.detectChanges();

    let visitDate = fixture.nativeElement.querySelector('#region-start .timeline-visit-content-desktop .visit-date');

    expect(visitDate.textContent).toContain(learnerStartDate);
});

测试通过，但我在控制台中收到以下错误。

Access to XMLHttpRequest at 'ng:///DynamicTestModule/LearnerEventsActivitiesComponent.ngfactory.js' from origin 'http://localhost:9876' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

a 标签 'showRegionAndVisit()' 调用的函数正在调用 setTimeout() ，当我注释掉它时，我不再在控制台中收到错误，所以这是罪魁祸首。

有什么方法可以在测试中为组件提供模拟 setTimeout 吗？

干杯

Answer 1

我找到了答案。我添加了

jasmine.clock().install();

在我的测试开始时，它用模拟函数替换了 setTimeout

Angular 组件中的 setTimeout() 调用导致测试中出现控制台错误，即使测试通过了

Angular setTimeout() call in component is causing console errors in test, even though the test passes

click

settimeout

jasmine

angular