運行“ng test”時，Karma 中的元素未知錯誤

Question

當我運行時，我的項目運行良好

服務

但是當我運行一個簡單的“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 { }

我該怎么做才能為應用程序模塊實例運行成功的測試用例？

Answer 1

Angular 開發人員經常對此感到困惑。 當您運行ng test ，karma 和 jasmine 會運行.spec.ts文件中定義的 angular 模塊。 它根本不看你的正常代碼。 因此，無論您在app.module.ts中app.module.ts什么，都不會對您的測試模塊產生任何影響。 你可以做兩件事。

1. 將CUSTOM_ELEMENTS_SCHEMA添加到測試模塊

   在app.component.spec.ts執行以下操作

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

這將解決您現在遇到的錯誤。 但是，您可能會遇到其他人，因為我已經看到您向AppComponent注入了一些服務，這使我們可以做下一件事情

2. 在測試模塊中導入AppModule 。

   您可以按如下AppModule在TestBed導入AppModule 。 這樣做是為了確保您的測試始終具有所需的定義。 如果您將另一個組件添加到AppModule並在AppComponent使用它，它也將在測試中可用。 此外，您不需要添加CUSTOM_ELEMENTS_SCHEMA 。

   但是，您應該知道這將導入並創建您在app.component使用的任何 3rd 方組件/服務。 有人會爭辯說這違背了單元測試的性質。 您仍然可以以某種方式模擬這些服務，但它們將被呈現。 此外，在角度應用程序中，在測試導入RouterModule的模塊時，會使用RouterTestingModule代替。 在測試中使用RouterModule可能會弄亂您的測試，因為這些測試在無頭瀏覽器上運行並且RouterModule可能會導致 URL 更改。

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

Answer 2

雖然接受的答案是正確的，這意味着它有效地解決了問題，但請注意以下幾點：

• 使用CUSTOM_ELEMENTS_SCHEMA或NO_ERRORS_SCHEMA可能會導致“錯誤吞咽”。 正如官方文檔中所述，不要過度使用它們。
• 導入AppModule意味着您正在編寫集成測試。 通常，最好編寫一個隔離的單元測試。

因此恕我直言，最好的解決方案是存根不需要的組件，如官方文檔中所述。 基本上，您將使用相同的選擇器創建一個空組件。 如果您有很多組件，這可能會很乏味，但我相信這是目前的最佳實踐。