当执行"ng test"时，Karma中的元素未知错误 [英] Element not known error in Karma when ran "ng test"

问题描述

运行时我的项目运行正常

My project is running fine when i run

ng服务

ng serve

但是当我使用

ng测试

ng test

HTML文件

<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple">
  <p style="font-size: 20px; color: white">Loading...</p>
</ngx-spinner>
<div *ngIf="isAuthenticated" class="container-fluid">
  <app-app-menu></app-app-menu>
  <router-outlet></router-outlet>
</div>

app.component.ts

app.component.ts

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';

import { Store } from '@ngrx/store';
import { map } from 'rxjs/operators';

import { AppState } from './app.reducer';
import { UserState } from './core/store/core.state';
import * as CoreActions from './core/store/core.actions';
import { Globals } from './shared/globals';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  datetime = new Date();
  title = 'curemd-x';
  isAuthenticated = false;
  constructor(private store: Store<AppState>, private router: Router,
    private globals: Globals) {}
...
   ...

业力错误

 "Failed: Template parse errors:
'ngx-spinner' is not a known element:
1. If 'ngx-spinner' is an Angular component, then verify that it is part of this module.
2. If 'ngx-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple">
  <p"): ng:///DynamicTestModule/AppComponent.html@0:0
'app-app-menu' is not a known element:
1. If 'app-app-menu' is an Angular component, then verify that it is part of this module.
2. If 'app-app-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ngx-spinner>
<div *ngIf="isAuthenticated" class="container-fluid">
  [ERROR ->]<app-app-menu></app-app-menu>
  <router-outlet></router-outlet>
</div>
"): ng:///DynamicTestModule/AppComponent.html@4:2

我还尝试添加"CUSTOM_ELEMENTS_SCHEMA"，但没有用.

i also tried to include "CUSTOM_ELEMENTS_SCHEMA" but didn't work.

"app-app-menu"是核心模块中存在的组件，核心模块导入了app.module

"app-app-menu" is a component present in core module and core module is imported in app.module

app.module.ts

app.module.ts

  declarations: [
    AppComponent,
    FirstOrDefaultPipe
  ],
  imports: [
    RouterModule,
    BrowserModule,
    HttpClientModule,
    PatientModule,
    StoreModule.forRoot(AppReducers),
    EffectsModule.forRoot([]),
    CoreModule,
    NgxSpinnerModule,
    BrowserAnimationsModule,
    DropDownsModule
  ],
  providers: [Globals],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

我该怎么做才能为应用程序模块实例运行成功的测试用例?

what can i do to run a successful test case for app module instance?

推荐答案

Angular开发人员经常对此感到困惑.当您运行ng test时，业力和茉莉花会运行在.spec.ts文件中定义的角度模块.它根本不会查看您的常规代码.因此，无论您在app.module.ts中放入什么内容，都不会对您的测试模块产生任何影响.您可以做两件事.

Angular developers often get confused by this. When you run ng test, karma and jasmine runs angular modules defined within .spec.ts files. It does not look at your normal code at all. So whatever you put in app.module.ts has no effect whatsoever on your test module. There are two things you could do.

1. 将CUSTOM_ELEMENTS_SCHEMA添加到测试模块

在app.component.spec.ts内执行以下操作

   TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
   }).compileComponents();

这将解决您现在遇到的错误.但是，您可能会遇到其他人，因为我已经看到您向AppComponent注入了一些服务，这使我们想到了您可以做的下一件事

This would solve the error you are getting now. However, you'll probably encounter others as I've seen you inject some services to AppComponent which brings us to next thing you could do

1. 将AppModule导入测试模块.

您可以按照以下步骤在TestBed中导入AppModule.这样做是为了确保您的测试始终定义需要的内容.如果将其他组件添加到AppModule并在AppComponent中使用，则该组件也已在测试中可用.另外，您无需添加CUSTOM_ELEMENTS_SCHEMA.

You could just import AppModule within TestBed as follows. What this will do is to ensure that your tests always have what they need defined. If you add another component to AppModule and use it in AppComponent, it will be already available in test as well. Also, you won't need to add CUSTOM_ELEMENTS_SCHEMA.

但是，您应该意识到，这将导入并创建您在app.component中使用的任何第三方组件/服务.有人会认为这与单元测试的性质背道而驰.您仍然可以以某种方式模拟这些服务，但是它们将被呈现.同样，在角度应用中，当测试导入RouterModule的模块时，将使用RouterTestingModule代替.在测试中使用RouterModule可能会打乱您的测试，因为这些测试在无头浏览器上运行，并且RouterModule可能会导致URL更改.

However, you should be aware that this will import and create whatever 3rd party component/services you use within app.component. One would argue that it is against the nature of unit testing. You can still mock those services somehow but they will be rendered. Also, in angular applications, when testing a module that imports RouterModule, RouterTestingModule is used instead. Using RouterModule within test may mess your tests up as these tests run on a headless browser and RouterModule may cause URL changes.

    TestBed.configureTestingModule({
      imports: [
        AppModule
      ],
    }).compileComponents();

这篇关于当执行"ng test"时，Karma中的元素未知错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！