Элемент не известна ошибка в карме при запуске "тест нг" - PullRequest
Новая
       33

Элемент не известна ошибка в карме при запуске "тест нг"

1 голос
/ 03 мая 2019

Мой проект работает нормально, когда я запускаю

нг подача

но он показывает несколько ошибок, когда я запускаю простой тест "tobeTruthy ()", используя

нг тест

ФАЙЛ 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 

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", но не работал.

"app-app-menu" - это компонент, присутствующий в основном модуле, а основной модуль импортируется в app.module

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 { }

что я могу сделать, чтобы выполнить успешный тестовый пример для экземпляра модуля приложения?

1 Ответ

0 голосов
/ 03 мая 2019

Разработчики Angular часто путаются с этим. Когда вы запускаете ng test, karma и jasmine запускают угловые модули, определенные в файлах .spec.ts. Он вообще не смотрит на твой обычный код. То, что вы вводите в app.module.ts, никак не влияет на ваш тестовый модуль. Вы можете сделать две вещи.

  1. Добавить CUSTOM_ELEMENTS_SCHEMA в модуль тестирования

    В пределах app.component.spec.ts сделать следующее 

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

Это решит ошибку, которую вы получаете сейчас. Однако вы, вероятно, столкнетесь с другими, так как я видел, как вы вводите некоторые службы в AppComponent, что подводит нас к следующему, что вы могли бы сделать

  1. Импорт AppModule в тестовом модуле.

    Вы можете просто импортировать AppModule в TestBed следующим образом. Это будет гарантировать, что ваши тесты всегда будут иметь то, что им нужно определить. Если вы добавите еще один компонент в AppModule и используете его в AppComponent, он также будет доступен в тесте. Кроме того, вам не нужно добавлять CUSTOM_ELEMENTS_SCHEMA.

    Однако вы должны знать, что это будет импортировать и создавать любые сторонние компоненты / сервисы, которые вы используете в app.component. Можно утверждать, что это противоречит характеру модульного тестирования Вы все еще можете каким-то образом высмеивать эти услуги, но они будут оказаны. Кроме того, в угловых приложениях при тестировании модуля, который импортирует RouterModule, вместо него используется RouterTestingModule. Использование RouterModule в тесте может испортить ваши тесты, так как эти тесты запускаются в браузере без заголовка, а RouterModule может вызвать изменения URL. 

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