为什么我收到 NullInjectorError: R3InjectorError(DynamicTestModule)[MdbModalRef -> MdbModalRef]:？

Question

我有一个 angular 应用程序，其中我有一个名为CreateComponent的组件，它以modal打开。 该组件工作正常。 现在我正在为该CreateComponent编写unit tests

所以我像这样提供了我所有的依赖项

 import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { GlobalConstants } from '@constants/global.constants'; import { MDBBootstrapModule } from 'angular-bootstrap-md'; import { MockDependenciesModule } from 'app/modules/mock-dependecies/mock-dependencies.module'; import { MdbFormsModule } from 'mdb-angular-ui-kit/forms'; import { MdbModalModule, MdbModalService } from 'mdb-angular-ui-kit/modal'; import { ToastrModule, ToastrService } from 'ngx-toastr'; import { CreateComponent } from './create.component'; describe('CreateComponent', () => { let component: CreateComponent; let fixture: ComponentFixture<CreateComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [ CreateComponent ], imports: [ HttpClientModule, ToastrModule.forRoot(), MdbModalModule, CommonModule, BrowserModule, MDBBootstrapModule.forRoot(), FormsModule, ReactiveFormsModule, MdbFormsModule, MockDependenciesModule, ], providers: [ToastrService, MdbModalService] }).compileComponents(); }); beforeEach(() => { fixture = TestBed.createComponent(CreateComponent); component = fixture.componentInstance; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); });

但是当我运行测试时，它给了我这样的错误

NullInjectorError: R3InjectorError(DynamicTestModule)[MdbModalRef -> MdbModalRef]:
   NullInjectorError: No provider for MdbModalRef!

所以每次我的测试失败。 这里有什么问题？

注意：我正在使用mdb bootstrap

Answer 1

我必须对您的代码做出一些假设，因为您尚未发布 component.ts 代码，但您似乎已将MdbModalRef声明为构造函数参数。

MdbModalRef并不意味着直接注入。 相反，您应该使用MdbModalService获得一个，就像这样

export class CreateComponent {
    modalRef: MdbModalRef<any>;
    constructor(private modalService: MdbModalService) {}
    // ...
    showModal(modal: TemplateRef<any>) {
        this.modalRef = modalService.open(modal);
    }
}

当然，根据场景，您的代码看起来会有所不同