如何对使用 CarouselModule 的 Angular 组件进行单元测试答案

【问题标题】：How to unit test an Angular component which uses CarouselModule如何对使用 CarouselModule 的 Angular 组件进行单元测试
【发布时间】：2021-05-16 07:47:03
【问题描述】：

我创建了一个自定义组件TorsoComponent，它使用了另一个使用轮播的自定义组件SponcerComponent。我需要测试TorsoComponent 而不是轮播（轮播是我从 NPM 安装的依赖项）。所以我对此并不关心，但它阻碍了我的躯干测试。这是我的代码。

package.json

“依赖”：{ ... “ngx-owl-carousel-o”：“^2.0.3” }

app.module.ts

import { CarouselModule } from 'ngx-owl-carousel-o';
...
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    CarouselModule,
    ...
  ]})

sponcers.component.ts

import { Component, OnInit } from '@angular/core';
import { OwlOptions } from 'ngx-owl-carousel-o';
@Component({
  ...
})
export class SponcersComponent {
  customOptions: OwlOptions = {
    ...
}

sponcers.component.html

<owl-carousel-o [options]="customOptions">
    <ng-template carouselSlide>
        <div id="template"><img class="....png"></div>
    </ng-template> 
    <ng-template carouselSlide>
    <div id="template"><img class="...png"></div>
        </ng-template>  
    <ng-template carouselSlide>
    ...
</owl-carousel-o>

现在是我需要帮助的规范文件。

torso.component.html

<app-sponcers></app-sponcers>

torso.component.spec.ts

import { TestBed, async } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { SponcersComponent } from '../sponcers/sponcers.component';
import { TorsoComponent } from './torso.component';

fdescribe('TorsoComponent', ()=> {

  
  beforeEach(async()=> {
    TestBed.configureTestingModule({
      declarations: [TorsoComponent, SponcersComponent, CarouselModule ],
      imports: [TranslateModule.forRoot()]
    }).compileComponents();
  })

  it('should create', () => {
    const fixture = TestBed.createComponent(TorsoComponent);
    const app = fixture.debugElement.componentInstance;
  })
})

我被严格告知不要使用CUSTOM_ELEMENTS_SCHEMA。现在我收到此错误：

请指出我的错误。

【问题讨论】：

可以发TorsoComponent的代码
@Tanzeel 您好，在torso.component.spec.ts 文件中，您需要从声明数组中删除CarouselModule 并将其放入导入数组中，如下所示：imports: [ CarouselModule ]。

标签： angular karma-jasmine

【解决方案1】：

您应该使用imports 来导入CarouselModule，如下所示

import { TestBed, async } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { CarouselModule } from 'ngx-owl-carousel-o';
import { SponcersComponent } from '../sponcers/sponcers.component';
import { TorsoComponent } from './torso.component';

fdescribe('TorsoComponent', ()=> {

  
  beforeEach(async()=> {
    TestBed.configureTestingModule({
      imports: [CarouselModule], // <-- should be added here
      declarations: [TorsoComponent, SponcersComponent ],
      imports: [TranslateModule.forRoot()]
    }).compileComponents();
  })

  it('should create', () => {
    const fixture = TestBed.createComponent(TorsoComponent);
    const app = fixture.debugElement.componentInstance;
  })
})

【讨论】：

这对我有用。但是还有一些其他的疑问，我想离线。请检查您的 gmail。