Angular2 - testing component with two “it” creates 'selector “#root0” did not match any elements error'

Question

I am trying to create a simple component test, when I createAsync an element twice I get The selector "#root0" did not match any elements error. I assume it creates it the second time with #root1 but looks for #root0

it('should render',
    inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      tcb.createAsync(TestComponent)
        .then((componentFixture) => {
          componentFixture.detectChanges();
          expect(true).toBeTruthy();      
          componentFixture.destroy();
        }).catch((e) =>{
          console.log(e);
        });
    })
);

it('should render',
    inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
      tcb.createAsync(TestComponent)
        .then((componentFixture) => {
          componentFixture.detectChanges();
          expect(true).toBeTruthy();      
          componentFixture.destroy();
        }).catch((e) =>{
          console.log(e);
        });
    })
);

If I run just one "it" test it works fine. the second one fails... I tried it with and without the componentFixture.destroy(); but no success... To be clear - the tests passes, but the error shows up in the console.

Here is the complete error log:

LOG: BaseException{message: 'The selector "#root0" did not match any elements', stack: 'Error: The selector "#root0" did not match any elements at new BaseException ( http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:7070:21 ) at DomRenderer.selectRootElement ( http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:13643:15 ) at HostViewFactory.viewFactory_HostTestComponent0 [as viewFactory] (viewFactory_HostTestComponent:72:18) at AppViewManager_.createRootHostView ( http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:9172:34 ) at http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:12189:46 at M ( http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:8769 ) at H ( http://localhost :9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:8401 ) at R.when ( http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:12075 ) at b.run ( http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:11111 ) at t._drain ( http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:3029 ) at drain ( http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:2683 ) at MutationObserver.e ( http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:4604 ) at Zone.run ( http://localhost:9876/base/node_modules/angular2/bundles/angular2-polyfills.js?2a193e6e9bdd25760b711f1ce03caeac530e48c1:138:17 ) at MutationObserver.zoneBoundFn ( http://localhost:9876 /base/node_modules/angular2/bundles/angular2-polyfills.js?2a1

Answer 1

This is a known issue https://github.com/angular/angular/issues/6483 (dup of https://github.com/angular/angular/issues/5662 ) when templateUrl is used in components.

Update

This is fixed in Angular 2.0.0-beta.3

See https://github.com/angular/angular/issues/6483#issuecomment-179557485 for more details

Basically, what I had to do:

• Manually add typings for jasmine with tsd install jasmine -so and add ///<reference... in the test files;
• Add this in my imports:

import {setBaseTestProviders} from 'angular2/testing';

import {
  TEST_BROWSER_PLATFORM_PROVIDERS,
  TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';

Add this before my Component tests:

  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);

Answer 2

An update to the update: Beta.3 did fix the problem as Günter Zöchbauer mentioned, we can now use injectAsync that didn't work before. Also I suggest to use this:

import {setBaseTestProviders} from 'angular2/testing';
import {getTestInjector} from 'angular2/testing';
import {TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS
} from 'angular2/platform/testing/browser';

if (getTestInjector().platformProviders.length === 0 || getTestInjector().applicationProviders.length === 0) {
  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
}

otherwise you will get an error when loading your BaseTestProviders the second time.