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

Question

I have an angular app in which i have component called CreateComponent which opens as a modal . That component is working fine. Now i am writing unit tests for that CreateComponent

So i provided all of my dependencies like this

 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(); }); });

But when i run the test so it is givine me an error like this

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

So every time my test fails. What's wrong here?

Note: I am using mdb bootstrap

Answer 1

I have to make some assumptions about your code, as you have not posted the component.ts code, but it seems that you have declared an MdbModalRef as a constructor parameter.

MdbModalRef s are not meant to be injected directly. Instead, you should obtain one using an MdbModalService , like so

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

of course, your code will look a bit different based on the scenario