Angular2 - 用两个＆QUOT测试组件;它＆QUOT;创建“选择＆QUOT;＃root0＆QUOT;没有匹配的元素错误“ [英] Angular2 - testing component with two "it" creates 'selector "#root0" did not match any elements error'

问题描述

我想创建一个简单的组件测试，当我createAsync元素两次，我得到的选择＃root0没有匹配的元素错误。我假设它创建它的第二次与＃root1下，但看起来对＃root0

 它（'应该呈现，
    注入（[TestComponentBuilder]，（TCB：TestComponentBuilder）= GT; {
      tcb.createAsync（TestComponent）
        。然后（（componentFixture）= GT; {
          componentFixture.detectChanges（）;
          期待（真）.toBeTruthy（）;
          componentFixture.destroy（）;
        }）赶上（（E）=＆GT; {
          的console.log（E）;
        }）;
    }）
）;它（'应该呈现，
    注入（[TestComponentBuilder]，（TCB：TestComponentBuilder）= GT; {
      tcb.createAsync（TestComponent）
        。然后（（componentFixture）= GT; {
          componentFixture.detectChanges（）;
          期待（真）.toBeTruthy（）;
          componentFixture.destroy（）;
        }）赶上（（E）=＆GT; {
          的console.log（E）;
        }）;
    }）
）;
 

如果我运行只是一个它测试工作正常。第二个失败......我有和没有componentFixture.destroy（）试了一下;但没有成功...
需要明确的是 - 测试通过，但在控制台中的错误显示出来。

下面是完整的错误日志：

  

LOG：BaseException {消息：选择器＃root0没有匹配的元素'，堆栈：'错误：选择＃root0没有匹配的元素
      在新BaseException（<一个href=\"http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:7070:21\" rel=\"nofollow\">http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:7070:21)
      在DomRenderer.selectRootElement（<一个href=\"http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:13643:15\" rel=\"nofollow\">http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:13643:15)
      在HostViewFactory.viewFactory_HostTestComponent0 [如的ViewFactory（viewFactory_HostTestComponent：72：18）
      在AppViewManager_.createRootHostView（<一个href=\"http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:9172:34\" rel=\"nofollow\">http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:9172:34)
      在<一个href=\"http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:12189:46\" rel=\"nofollow\">http://localhost:9876/base/node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:12189:46
      在M（<一个href=\"http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:8769\" rel=\"nofollow\">http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:8769)
      在H（<一个href=\"http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:8401\" rel=\"nofollow\">http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:8401)
      在R.when（<一个href=\"http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:12075\" rel=\"nofollow\">http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:12075)
      在b.run（<一个href=\"http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:11111\" rel=\"nofollow\">http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:11111)
      在t._drain（<一个href=\"http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:3029\" rel=\"nofollow\">http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:3029)
      在漏极（<一个href=\"http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:2683\" rel=\"nofollow\">http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:2683)
      在MutationObserver.e（<一个href=\"http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:4604\" rel=\"nofollow\">http://localhost:9876/base/node_modules/systemjs/dist/system-polyfills.js?064ab212cfd9e125474ae3bbb600c366b31e79cb:4:4604)
      在Zone.run（<一个href=\"http://localhost:9876/base/node_modules/angular2/bundles/angular2-polyfills.js?2a193e6e9bdd25760b711f1ce03caeac530e48c1:138:17\" rel=\"nofollow\">http://localhost:9876/base/node_modules/angular2/bundles/angular2-polyfills.js?2a193e6e9bdd25760b711f1ce03caeac530e48c1:138:17)
      在MutationObserver.zoneBoundFn（的http://localhost:9876/base/node_modules/angular2/bundles/angular2-polyfills.js?2a1

解决方案

这是一个已知的问题 HTTPS ：//github.com/angular/angular/issues/6483 （的https： //github.com/angular/angular/issues/5662 ）当 templateUrl 组件中使用。

更新

这是固定的角2.0.0 beta.3

请参阅 https://github.com/angular/angular/issues/6483 ＃issuecomment-179557485 了解详细信息。

  

基本上，我不得不这样做：

  
  

  
• 手动添加分型茉莉花与TSD - 所以安装茉莉，并添加 ///＆lt;参考... 中的测试文件;

  
• 在我的进口补充一点：

  

从'angular2 /测试进口{setBaseTestProviders};进口{
  TEST_BROWSER_PLATFORM_PROVIDERS，
  TEST_BROWSER_APPLICATION_PROVIDERS
}从angular2 /平台/测试/浏览器;


  

在我的组件测试补充一点：

setBaseTestProviders（TEST_BROWSER_PLATFORM_PROVIDERS，TEST_BROWSER_APPLICATION_PROVIDERS）;


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

解决方案

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);

这篇关于Angular2 - 用两个＆QUOT测试组件;它＆QUOT;创建“选择＆QUOT;＃root0＆QUOT;没有匹配的元素错误“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！