使用 matHorizo​​ntalStepper 进行测试。 Angular Material

Question

我正在为 mat-stepper 编写测试。我 运行 进入错误：错误：找不到名称 'matHorizontalStepper' 的导出！

感谢下面的评论，我明白了。

当使用 Angular Material 组件进行测试时，您必须将它们与 BrowserAnimationsModule 一起导入到测试文件中，有时还需要将 ReactiveFormsModule 导入。

  describe('EditFulfillmentWorkflowComponent', () => {
let component: EditFulfillmentWorkflowComponent;
let fixture: ComponentFixture<EditFulfillmentWorkflowComponent>;
beforeEach(() => {
const activatedRouteStub = () => ({
  snapshot: { paramMap: { get: () => ({}) } }
});



const routerStub = () => ({ navigateByUrl: string => ({}) });
const notificationsServiceStub = () => ({});
const fulfillmentServiceStub = () => ({
  getFulfillmentWorkflows: any => ({ subscribe: f => f }),
  getOrchestratorActionInfo: any => ({ subscribe: f => f }),
  checkIfWorkflowNameExists: any => ({ subscribe: f => f(Boolean) }),
  updateFulfillmentWorkflow: submitFulfillmentWorkflow => ({
    subscribe: f => f({})
  })
});
TestBed.configureTestingModule({
  schemas: [NO_ERRORS_SCHEMA],
  declarations: [EditFulfillmentWorkflowComponent],
  imports: [MatStepperModule, BrowserAnimationsModule, ReactiveFormsModule],
  providers: [
    { provide: ActivatedRoute, useFactory: activatedRouteStub },
    { provide: Router, useFactory: routerStub },
    { provide: NotificationsService, useFactory: notificationsServiceStub },
    { provide: FulfillmentService, useFactory: fulfillmentServiceStub }
  ]
});
fixture = TestBed.createComponent(EditFulfillmentWorkflowComponent);
component = fixture.componentInstance;
});


beforeEach(() => {
fixture = TestBed.createComponent(EditFulfillmentWorkflowComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();

}); [编辑]第一条评论解决了我的问题。

Answer 1

首先，您需要导入组件使用的所有模块。

因此，您需要导入：

import {MatStepperModule} from '@angular/material/stepper';

并将其添加到 TestBed.configureTestingModule({...})

的 imports 中

此外，如果您在组件中使用组件，则需要在 TestBed.configureTestingModule({...})

的 declarations: [EditFulfillmentWorkflowComponent], 中添加