您如何知道在进行单元测试时要导入哪些组件? [英] How do you know which components to import when unit testing?

查看：153
本文介绍了您如何知道在进行单元测试时要导入哪些组件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用Angular2(2.1.0)最终版本.

使用...进行单元测试时，我正在通过AppModule导入所有组件.

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppModule],
      ...

但是，这使测试运行缓慢.

我现在只列出我需要的组件，如下所示... 

  beforeEach(async(() => {
    // noinspection JSUnusedGlobalSymbols
    TestBed.configureTestingModule({
      imports: [BrowserModule, FormsModule, HttpModule], // modules
      declarations: [
        // pipes
        AttributeCheckPipe,
        // directives
        // DatePickerDirective,
        ...

但是，我有很多组件，我不确定要导入哪些组件.测试输出不会告诉我我需要导入哪些.它只是简单地通过(当我全部导入时)或失败(如果我不导入)，但是并没有告诉我需要哪些.

该错误是令人讨厌的/无用的.. 

invokeTask@node_modules/zone.js/dist/zone.min.js:1:36996
onInvokeTask@node_modules/zone.js/dist/proxy.min.js:1:2190
invokeTask@node_modules/zone.js/dist/zone.min.js:1:36939
runTask@node_modules/zone.js/dist/zone.min.js:1:31466
a@node_modules/zone.js/dist/zone.min.js:1:17818
g@node_modules/core-js/client/shim.min.js:8:19058
node_modules/core-js/client/shim.min.js:8:19180
k@node_modules/core-js/client/shim.min.js:8:14294
l@node_modules/zone.js/dist/zone.min.js:1:18418
l@node_modules/zone.js/dist/zone.min.js:1:18175
node_modules/zone.js/dist/zone.min.js:1:18715

如何获得有关导入失败的组件的反馈?

我正在使用Karma和PhantomJS.

我的Karma配置摘录是.. 

client: {
  captureConsole: true
},
logLevel: config.LOG_DEBUG

解决方案

最后在这里取得了一些进展.我在 compileComponents()中添加了一个 catch 块，并记录了 e.message ，并获得了一些有用的输出，这使我可以工作！ >

这里有我的代码.. 

  beforeEach(async(() => {
    TestBed.configureTestingModule({

      imports: [FormsModule, HttpModule, routing], // modules

      declarations: [
        SaveSearchModalComponent
      ],
      providers: [
        ESQueryService,
        RESTQueryService,
      ]
    }).compileComponents()
      .then(() => {
        fix = TestBed.createComponent(SaveSearchModalComponent);
        instance = fix.componentInstance;
        injector = fix.debugElement.injector;
      }).catch((e) => {
      console.log(e.message);
      throw e;
    });
  }));

错误消息输出的摘录是...

'dynamic-form'不是一个已知元素: 1.如果"dynamic-form"是Angular组件，则请验证它是否是此模块的一部分. 2.如果'dynamic-form'是Web组件，则将"CUSTOM_ELEMENTS_SCHEMA"添加到该组件的'@ NgModule.schemas' 禁止显示此消息.

令人惊讶的是，文档中的任何地方都没有提到(但是我应该早就猜到了！)

现在怎么办...

哇，完成上述操作(修复了99％的问题)后，我又遇到了另一条无用的错误消息...

组件e不是任何NgModule的一部分，或者该模块尚未导入到您的模块中.

哪个来自...

/node_modules/@angular/compiler/bundles/compiler.umd.js

因此请遵循..

上的建议

Angular 2组件不属于任何NgModule

我将此日志语句添加到 compiler.umd.js 

// I ADDED THIS LOG STATEMENT
console.log('compType', String(compType));
// THIS LINE EXISTS ALREADY
throw new Error("Component " + stringify(compType) + " is not part of any NgModule or the module has not been imported into your module.");

通常可以确定罪魁祸首.但是，在这里，我得到了虚假的输出...

LOG:函数e(e) {__cov_m4LFTxiG42jWqZk7He0hiA.f ['4'] ++; __ cov_m4LFTxiG42jWqZk7He0hiA.s ['11'] ++; this.router = e，this.formErrors = {invalidCreds:！1};}'

提到this.router

所以我删除了路由导入并瞧瞧！

但令人难以置信的是，这种痛苦是必要的.

I am using Angular2 (2.1.0) final release.

I was importing all components via AppModule when unit testing using ...

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppModule],
      ...

However, this made test runs slow.

I am now listing only the components I need as follows ...

  beforeEach(async(() => {
    // noinspection JSUnusedGlobalSymbols
    TestBed.configureTestingModule({
      imports: [BrowserModule, FormsModule, HttpModule], // modules
      declarations: [
        // pipes
        AttributeCheckPipe,
        // directives
        // DatePickerDirective,
        ...

However, I have lots and lots of components and I am not sure which ones to import. The test output does not tell me which ones I need to import. It just simply passes (when I import them all) or fails (if I don't) but it doesn't tell me which ones are needed.

The error is an annoying / useless ..

invokeTask@node_modules/zone.js/dist/zone.min.js:1:36996
onInvokeTask@node_modules/zone.js/dist/proxy.min.js:1:2190
invokeTask@node_modules/zone.js/dist/zone.min.js:1:36939
runTask@node_modules/zone.js/dist/zone.min.js:1:31466
a@node_modules/zone.js/dist/zone.min.js:1:17818
g@node_modules/core-js/client/shim.min.js:8:19058
node_modules/core-js/client/shim.min.js:8:19180
k@node_modules/core-js/client/shim.min.js:8:14294
l@node_modules/zone.js/dist/zone.min.js:1:18418
l@node_modules/zone.js/dist/zone.min.js:1:18175
node_modules/zone.js/dist/zone.min.js:1:18715

How do I get feedback about which components I failed to import? thx

I am using Karma and PhantomJS.

My Karma config excerpt is ..

client: {
  captureConsole: true
},
logLevel: config.LOG_DEBUG

解决方案

Finally made some progress here. I added a catch block to compileComponents() and logged e.message and got some useful output which gives me something to work on!

Heres my code ..

  beforeEach(async(() => {
    TestBed.configureTestingModule({

      imports: [FormsModule, HttpModule, routing], // modules

      declarations: [
        SaveSearchModalComponent
      ],
      providers: [
        ESQueryService,
        RESTQueryService,
      ]
    }).compileComponents()
      .then(() => {
        fix = TestBed.createComponent(SaveSearchModalComponent);
        instance = fix.componentInstance;
        injector = fix.debugElement.injector;
      }).catch((e) => {
      console.log(e.message);
      throw e;
    });
  }));

An excerpt from the error message output is ...

'dynamic-form' is not a known element: 1. If 'dynamic-form' is an Angular component, then verify that it is part of this module. 2. If 'dynamic-form' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

Amazing this is not covered anywhere in the docs (but I should have guessed this sooner!)

AND NOW WHAT ...

WOW, after doing the above (which fixed 99% of issues) I hit another useless error message ...

Component e is not part of any NgModule or the module has not been imported into your module.

Which comes from ...

/node_modules/@angular/compiler/bundles/compiler.umd.js

So following the advice at ..

Angular 2 Component is not part of any NgModule

I added this log statement to compiler.umd.js

// I ADDED THIS LOG STATEMENT
console.log('compType', String(compType));
// THIS LINE EXISTS ALREADY
throw new Error("Component " + stringify(compType) + " is not part of any NgModule or the module has not been imported into your module.");

this usually identifies the culprit. However, here I got the spurious output ...

LOG: 'function e(e) {__cov_m4LFTxiG42jWqZk7He0hiA.f['4']++;__cov_m4LFTxiG42jWqZk7He0hiA.s['11']++;this.router=e,this.formErrors={invalidCreds:!1};}'

which mentions this.router

So I removed the routing import and voila!

But unbelievable that this pain is necessary.

这篇关于您如何知道在进行单元测试时要导入哪些组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆