Angular2 - a testing component with two "it" creates a "selector" # root0 "does not correspond to elementary errors",

Question

I try to create a simple component test, when I create an Async element twice, I get. The selector "# root0" does not match any element error. I assume it creates it a second time with C # root1, but is looking 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 only one “this” test, it works fine. second failure ... I tried this with and without componentFixture.destroy (); but no success ... To be clear - the tests pass, but the error is displayed in the console.

Here is the complete error log:

LOG: BaseException {message: "The selector" # root0 "does not match any elements", stack: "Error: the selector" # root0 "does not match any elements with a new BaseException ( http: // localhost: 9876 / base / node_modules / angular2 /bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:7070:21 ) in DomRenderer.selectRootElement ( http: // localhost: 9876 / base / node_modules / angular2 / bundles / angular2.dev.js? 9145638a9afeda 1392bf92b9a9f9af9a9b9f9f9d9f9b2f9a .viewFactory_HostTestComponent0 [as viewFactory] (viewFactory_HostTestComponent: 72: 18) in AppViewManager_.createRootHostView ( http: // localhost: 9876 / base / node_modules / angular2 / bundles / angular2.dev.js? 914563a3aa2bc999bb999 /localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:12189:46 with M ( http: / /localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb-00-00:8769 ) with H ( http: // localhost: 9876 / base / node_modules / systemjs / dist / system-poly 064ab212cfd9e125474ae3bbb600c366b31e79cb: 4: 8401 ) in R.when ( http: // localhost: 9876 / base / node_modules / systemjs / dist / system-polyfills.js? 064ab212cfd9e125474ae3bbb600c366bun.bb7975a31b7975b31r75b31r75b31r75 9876 / base / node_modules / systemjs / dist / system-polyfills.js? 064ab212cfd9e125474ae3bbb600c366b31e79cb: 4: 11111 ) on t._drain ( http: // localhost: 9876 / base / node_modules / systemjs / dist / system-polyfbbbbecs122 : 4: 3029 ) when leaking ( http: // localhost: 9876 / base / node_modules / systemjs / dist / system-polyfills.js? 064ab212cfd9e125474ae3bbb600c366b31e79cb: 4: 2683 ) to MutationObserver.e ( http: // localhost: 9876 / base /node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:4604 ) in Zone.run ( http: // localhost: 9876 / base / node_modules / angular2 / bundles / angular2-polyfills.js? 2a193e6e9bdd25760b711f1ce03caeac530e48c1: 138: 17 ) in MutationObserver.zoneBoundFn ( http: // localhost: 9876 / base / nodemodules angular2-polyfills.js? 2a1

Answer 1

This is a famous question https://github.com/angular/angular/issues/6483 (dup https://github.com/angular/angular/issues/5662 ) when templateUrl 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 details

Basically, what I had to do:

• Manually add typing for jasmine with tsd install jasmine -so and add ///<reference... to the test files;
• Add this to my import:

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

Add this before the tests of my component:

  setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS); 

Answer 2

Update to update: Beta.3 fixed the issue that Günter Zöchbauer mentioned, we can now use injectAsync, which didn't work before. I also suggest using 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 receive an error when loading BaseTestProviders a second time.