Testing Angular2 components that use setInterval or setTimeout : <p>I have a fairly typical, simple ng2 component that calls a service to get some data (carousel items). It also uses setInterval to auto-switch carousel slides in the UI every n seconds. It works just fine, but when running Jasmine tests I get the error: "Cannot use setInterval from within an async test zone".</p>

<p>I tried wrapping the setInterval call in this.zone.runOutsideAngular(() => {...}), but the error remained. I would've thought changing the test to run in fakeAsync zone would solve the problem, but then I get an error saying XHR calls are not allowed from within fakeAsync test zone (which does make sense).</p>

<p>How can I use both the XHR calls made by the service and the interval, while still being able to test the component? I'm using ng2 rc4, project generated by angular-cli. Many thanks in advance.</p>

<p>My code from the component:</p>

<pre><code>constructor(private carouselService: CarouselService) {
}

ngOnInit() {
    this.carouselService.getItems().subscribe(items =&gt; { 
        this.items = items; 
    });
    this.interval = setInterval(() =&gt; { 
        this.forward();
    }, this.intervalMs);
}
</code></pre>

<p>And from the Jasmine spec: </p>

<pre><code>it('should display carousel items', async(() =&gt; {
    testComponentBuilder
        .overrideProviders(CarouselComponent, [provide(CarouselService, { useClass: CarouselServiceMock })])
        .createAsync(CarouselComponent).then((fixture: ComponentFixture&lt;CarouselComponent&gt;) =&gt; {
            fixture.detectChanges();
            let compiled = fixture.debugElement.nativeElement;
            // some expectations here;
    });
}));
</code></pre>
