茉莉花测试失败：组件不属于任何NgModule或模块尚未导入模块中

Question

创建新组件后，我的几乎所有测试都遇到此错误：

SampleComponent > should create
Failed: Component TuzGraphComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component TuzGraphComponent is not part of any NgModule or the module has not been imported into your module.
    at JitCompiler._createCompiledHostTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25493:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25469:1
    at <Jasmine>
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25466:1
    at <Jasmine>
    at JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25455:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25393:1
    at Object.then (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:2166:27)
    at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25391:1)
    at JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25353:1)
Error: Component TuzGraphComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component TuzGraphComponent is not part of any NgModule or the module has not been imported into your module.
    at JitCompiler._createCompiledHostTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25493:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25469:1
    at <Jasmine>
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25466:1
    at <Jasmine>
    at JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25455:1)
    at http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25393:1
    at Object.then (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:2166:27)
    at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25391:1)
    at JitCompiler.compileModuleAndAllComponentsSync (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/compiler/fesm2015/compiler.js:25350:1)
Expected undefined to be truthy.
Error: Expected undefined to be truthy.
    at <Jasmine>
    at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/sandboxviews/sample/sample.component.spec.ts:85:23)
    at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:359:1)
    at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:308:1)

所以我将TuzGraphComponent添加到了所有测试的声明中。

首先，必须有一种比手动将任何新组件手动添加到每个现有测试文件中更简单的方法？！？！

无论如何，这修复了大多数测试。仍然有几个文件具有相同的错误，但是当我打开文件并进行比较时，这些错误一个接一个地消失了。我真的无法说出发生了什么变化。在其中一个文件中，我只是在Webstorm中单击“重新格式化文件”，并且似乎已解决该问题，在另一个文件中，我将一个单独的行{移回了它上面的行（结果：({），似乎可以解决它。

但是仍然有一个失败的测试文件，具有相同的错误；这实际上是我上面发布的错误。

我将在此处粘贴该文件，也许其他人可以发现差异？

import {async, ComponentFixture, TestBed} from '@angular/core/testing';

import {AccessdeniedComponent} from '../../pages/accessdenied/accessdenied.component';
import {AppMainComponent} from '../../app.main.component';
import {AppSubMenuComponent, LeftmenuComponent} from '../../leftmenu/leftmenu.component';
import {CalibrationComponent} from '../calibration/calibration.component';
import {ControlComponent} from '../control/control.component';
import {DataviewerComponent} from '../dataviewer/dataviewer.component';
import {ExperimentComponent} from '../experiment/experiment.component';
import {FilemanagerComponent} from '../filemanager/filemanager.component';
import {FooterComponent} from '../../footer/footer.component';
import {HeaderbarComponent} from '../../headerbar/headerbar.component';
import {LoginComponent} from '../../pages/login/login.component';
import {MethodComponent} from '../method/method.component';
import {NotfoundComponent} from '../../pages/notfound/notfound.component';
import {TuneComponent} from '../tune/tune.component';
import {AccordionModule} from 'primeng/accordion';
import {AppRoutingModule} from '../../app-routing.module';
import {BlockUIModule} from 'primeng/blockui';
import {CheckboxModule} from 'primeng/checkbox';
import {DialogModule} from 'primeng/dialog';
import {DropdownModule} from 'primeng/dropdown';
import {FormsModule} from '@angular/forms';
import {InputSwitchModule} from 'primeng/inputswitch';
import {InputTextModule} from 'primeng/inputtext';
import {OverlayPanelModule} from 'primeng/overlaypanel';
import {SampleComponent} from './sample.component';
import {ScrollPanelModule, SpinnerModule} from 'primeng/primeng';
import {TableModule} from 'primeng/table';
import {TuzGraphComponent} from '../tuz-graph/tuz-graph.component';

describe('SampleComponent', () => {
  let component: SampleComponent;
  let fixture: ComponentFixture<SampleComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AccessdeniedComponent,
        AppMainComponent,
        AppSubMenuComponent,
        CalibrationComponent,
        ControlComponent,
        DataviewerComponent,
        ExperimentComponent,
        FilemanagerComponent,
        FooterComponent,
        HeaderbarComponent,
        LeftmenuComponent,
        LoginComponent,
        MethodComponent,
        NotfoundComponent,
        SampleComponent,
        TuneComponent,
        TuzGraphComponent
      ],
      imports: [
        AccordionModule,
        AppRoutingModule,
        BlockUIModule,
        CheckboxModule,
        DialogModule,
        DropdownModule,
        FormsModule,
        InputSwitchModule,
        InputTextModule,
        OverlayPanelModule,
        ScrollPanelModule,
        SpinnerModule,
        TableModule
      ]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SampleComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Answer 1

我有一个类似的问题。我不知道问题的根源是什么，但请一一运行您的sample.component.spec.ts的所有先前测试，然后打开Web控制台！确保在每个测试中您的控制台没有任何错误，然后再次运行所有测试！有时您会遇到一个错误，该错误不会导致测试失败，但会损坏下一个错误]

Answer 2

之所以必须在所有测试中提供新组件，是因为您将真实组件声明为依赖项，而不是在每个spec文件中模拟它们。现在，至少有一个依赖项取决于新组件，因此您还必须声明新组件。

相反，您应该拥有代表您的真实零件的假零件。在您的示例中，您正在测试SampleComponent。它应该是您唯一的真实声明。其他一切都应该是假的。

这里是如何伪造AccessDeniedComponent的示例

@Component({
  selector: 'app-access-denied',
  template: `<div>Access Denied</div>`,
})
export class FakeAccessDeniedComponent{
  // any public input/outputs the real one has
  // any public method necessary for your tests
}

在这种情况下，您将希望假货具有与真实货品相同的选择器，并在文件外部使用相同的公共输入/输出/方法。在您的SampleComponent规范中，您现在可以声明FakeAccessDeniedComponent而不是实际的。

在您自己的测试中，他们应该只希望您已将数据传递给输入（称为方法）或侦听了输出。任何此类输出事件都应在需要它的测试中伪造。

要使AOT正常工作，您需要将伪造的组件添加到伪造的模块中。那个假模块不需要任何东西导入。

假设您已遍历所有依赖项，您可能将不需要导入那么多模块，因为您只需要导入SampleComponent需要工作的模块。您也可能不需要声明那么多组件，因为只需要SampleComponent依赖于什么即可。