首页 文章

Angular2 - 测试组件有两个“它”创建'selector “#root0” did not match any elements error'

提问于
浏览 次
1

我正在尝试创建一个简单的组件测试，当我创建两次元素时，我得到选择器“#root0”与任何元素错误都不匹配 . 我假设它第二次使用#root1创建它，但查找＃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);
        });
    })
);

如果我只运行一次“it”测试就行了 . 第二个失败了...我尝试了有没有componentFixture.destroy（）;但没有成功......要清楚 - 测试通过，但错误显示在控制台中 .

这是完整的错误日志：

LOG：BaseException {message：'选择器“#root0”与任何元素都不匹配，堆栈：'错误：选择器“#root0”与新BaseException中的任何元素都不匹配（http：// localhost：9876 / base /node_modules/angular2/bundles/angular2.dev.js?914563a3aa3b4999ed51fe88c1b6233d2f09e880:7070:21）在DomRenderer.selectRootElement（http：// localhost：9876 / base / node_modules / angular2 / bundles / angular2.dev.js？914563a3aa3b4999ed51fe88c1b6233d2f09e880：13643： 15）在AppViewManager_.createRootHostView（http：// localhost：9876 / base / node_modules / angular2 / bundles / angular2.dev.js？914563a3aa3b4999ed51fe88c1b6233d2f09e880：9172：34）的HostViewFactory.viewFactory_HostTestComponent0 [as viewFactory]（viewFactory_HostTestComponent：72：18） 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 / b在R.when（http：// localhost：9876 / base / node_modules / systemjs / dist / system-polyfills.js？064ab212cfd9e125474ae3bbb600c366b31e79cb：4）ase / node_modules / systemjs / dist / system-polyfills.js？064ab212cfd9e125474ae3bbb600c366b31e79cb：4：8401） ：120.）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）在排水管处（http：// localhost：9876 / base / node_modules / systemjs / dist / system-polyfills.js？064ab212cfd9e125474ae3bbb600c366b31e79cb：4：2683） at Zone.run的MutationObserver.e（http：// localhost：9876 / base / node_modules / systemjs / dist / system-polyfills.js？064ab212cfd9e125474ae3bbb600c366b31e79cb：4：4604）（http：// localhost：9876 / base / node_modules / angular2 / bundles / angular2-polyfills.js？2a193e6e9bdd25760b711f1ce03caeac530e48c1：138：17）在MutationObserver.zoneBoundFn（http：// localhost：9876 / base / node_modules / an gular2 /捆绑/ angular2-polyfills.js？2A1

unit-testing angular

2 回答

  • 0

    当组件中使用 templateUrl 时，这是一个已知问题https://github.com/angular/angular/issues/6483（dup of https://github.com/angular/angular/issues/5662） .

    Update

    这在Angular 2.0.0-beta.3中得到修复

    有关详细信息，请参阅https://github.com/angular/angular/issues/6483#issuecomment-179557485

    基本上，我必须做的事情：用tsd install jasmine -so手动添加茉莉花的打字，并在测试文件中添加/// <reference ...;在我的导入中添加：

    import {setBaseTestProviders} from 'angular2/testing';

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

    在我的组件测试之前添加它：

    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
    回复于
  • 1

    更新的更新：Beta.3确实解决了问题，因为GünterZöchbauer提到，我们现在可以使用之前无效的injectAsync . 另外我建议用这个：

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

    否则，第二次加载BaseTestProviders时会出错 .

    回复于

相关问题