Angular mat-divider 不是已知元素

Question

我正在尝试以 Angular Testing 弹出组件，但我不知道为什么当我启动测试时出现错误:

'mat-divider' is not a known element: 1. If 'mat-divider' is an Angular component, then verify that it is part of this module. 2. If 'mat-divider' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我在@NgModule 中导入了它，这是我的代码:

@NgModule({
  declarations: [
    AppComponent,
    AdminTopMenuComponent,
    SvGameCardComponent,
    SvCreationPopupComponent,
    MockPopupComponent,
	MyDialogComponent,
	FvCreationPopupComponent,
    GameModesComponent,
    LinkTestComponent,
    UserComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatDialogModule,
	BrowserAnimationsModule,
	MatButtonModule,
	MatCheckboxModule,
    MatTableModule,
    MatDividerModule,
    MatInputModule,
    MatSelectModule,
    MatFormFieldModule,
    MatCardModule,
    AppRoutingModule,
    RouterModule,
  ],
  exports: [
      MatDividerModule,
      MatFormFieldModule,
  ],
  providers: [BasicService],
  bootstrap: [AppComponent],
  entryComponents: [
    MyDialogComponent,
    SvCreationPopupComponent,
    FvCreationPopupComponent,
    ]
})

export class AppModule {

}

@Component({
  selector: 'app-fv-creation-popup',
  templateUrl: './fv-creation-popup.component.html',
  styleUrls: ['./fv-creation-popup.component.css']
})
export class FvCreationPopupComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<FvCreationPopupComponent>, // dialogRef is now a reference to the diaolog popup
    @Inject(MAT_DIALOG_DATA) public data: any) { }      // allows the sharing of data through dialogConfig.data

  ngOnInit() {
    
  }
  
  submit(): void {
    //TODO: implementation de la fonction
    console.log("Submit fv-gameCard not implemented")
  }

  close(): void {
    this.dialogRef.close();
  }
  gameType: string[] = ["Formes géométriques","Thématique"];
  
}

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

import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { FvCreationPopupComponent } from "./fv-creation-popup.component";

describe("FvCreationPopupComponent", () => {
    let component: FvCreationPopupComponent;
    let fixture: ComponentFixture<FvCreationPopupComponent>;
    // const mock: MatDialogRef<FvCreationPopupComponent> = new MatDialogRef<FvCreationPopupComponent>(null, null) ;

    beforeEach(async(() => {
        // const data: MyDialogComponent = null;
        // data.message = "Dialog Message";
        // tslint:disable-next-line:typedef
        const mockDialogRef = {
            close: jasmine.createSpy("close"),
        };

        TestBed.configureTestingModule({
        imports: [MatDialogModule],
        declarations: [ FvCreationPopupComponent ],
        providers: [{ provide: MatDialogRef, useValue: {mockDialogRef} }, { provide: MAT_DIALOG_DATA, useValue: {} } ]})
        .compileComponents();
    }));

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

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

});

Answer 1

我认为您必须在测试模块中包含 MatDividerModule，您也必须对组件中使用的其他模块执行相同的操作:

import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
import { FvCreationPopupComponent } from "./fv-creation-popup.component";

describe("FvCreationPopupComponent", () => {
    let component: FvCreationPopupComponent;
    let fixture: ComponentFixture<FvCreationPopupComponent>;
    // const mock: MatDialogRef<FvCreationPopupComponent> = new MatDialogRef<FvCreationPopupComponent>(null, null) ;

    beforeEach(async(() => {
        // const data: MyDialogComponent = null;
        // data.message = "Dialog Message";
        // tslint:disable-next-line:typedef
        const mockDialogRef = {
            close: jasmine.createSpy("close"),
        };

        TestBed.configureTestingModule({
        imports: [MatDialogModule, MatDividerModule, ...],
        declarations: [ FvCreationPopupComponent ],
        providers: [{ provide: MatDialogRef, useValue: {mockDialogRef} }, { provide: MAT_DIALOG_DATA, useValue: {} } ]})
        .compileComponents();
    }));

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

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

});