Unable to query a mdb 5 pro element from the DOM in angular

After importing MdbModalService...

openStoreDialog = () => { this.modalRef = this.dialog.open(DialogCreateStoreComponent, { modalClass: 'modal-dialog-centered', ignoreBackdropClick: true, }); };

it('should open a dialog when the button is clicked', () => { const button:                     
HTMLElement = fixture.nativeElement.querySelector('.ms-auto');

button.click();

fixture.detectChanges();

console.log(document.body.innerHTML)    

const dialog: HTMLElement = document.body.querySelector('.modal-content')!;
expect(dialog).toBeTruthy();
});

it('should open a dialog when the button is clicked', fakeAsync(() => { 
const button: HTMLElement = fixture.nativeElement.querySelector('.ms-auto');

button.click();

fixture.detectChanges();
tick(350);

const dialog: HTMLElement = document.body.querySelector('.modal-content')!;
expect(dialog).toBeTruthy();
 }));

button.click();

fixture.detectChanges();

flush();

const dialog: HTMLElement =
  fixture.nativeElement.querySelector('.modal-content')!;

expect(fakeDialogService.open).toHaveBeenCalledTimes(1);

expect(dialog).toBeTruthy();

<div class="container-fluid d-flex flex-column px-5 py-5">
    <div class="d-flex flex-row align-items-center">
        <h1>Stores</h1>
        <app-button-primary
          class="ms-auto"
          type="filled"
          (click)="openStoreDialog()"
        >
          Add a Store
        </app-button-primary>

    <input
      mdbInput
      type="search"
      class="form-control rounded border-0"
      placeholder="Ex. Giant Food."
      aria-label="Ex. Giant Food."
      aria-describedby="search-addon"
      id="search-input"
      (keyup)="search($event)"
      (search)="this.clearInputSearchbar($event)"
    />
  </div>
</mdb-form-control>

{{ header | titlecase }}

  <tbody
    class="datatable-body"
    *ngIf="table.data?.length! >= 1; else noMatches"
    id="storeTableBody"
  >
    <tr
      *ngFor="let data of table.data"
      scope="row"
      (click)="this.onClickItem(data.fkey)"
      class="clickable"
    >
      <td>
        {{ data.name }}
      </td>
      <td>
        {{ data.address }}
      </td>
      <td>
        {{ data.region }}
      </td>
      <td>
        {{ data.lastVisit | date: "dd/MM/YYYY HH:mm a" }}
      </td>
      <td>
        {{ data.products }}
        {{ data.products > 1 ? "products" : "product" }}
      </td>
      <td><i class="fa-solid fa-ellipsis-vertical"></i></td>
    </tr>
  </tbody>
</table>

No matching results found

Hello, I was unable to reproduce this issue. I tried the same tsconfig.spec.json as yours. Here is my spec.ts working code:

import {
  ComponentFixture,
  fakeAsync,
  TestBed,
  tick,
} from '@angular/core/testing';

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MdbModalModule, MdbModalService } from 'mdb-angular-ui-kit/modal';

@Component({
  template: `
    <button class="ms-auto" type="filled" (click)="openStoreDialog()">
      Add a Store
    </button>
  `,
  providers: [MdbModalService],
})
class BasicComponent {
  constructor(public dialog: MdbModalService) {}
  modalRef;

  openStoreDialog = () => {
    this.modalRef = this.dialog.open(DialogCreateStoreComponent, {
      modalClass: 'modal-dialog-centered',
      ignoreBackdropClick: true,
    });
  };
}

@Component({
  template: `
    <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button
      type="button"
      class="btn-close"
      aria-label="Close"
      (click)="modalRef.close()"
    ></button>
  </div>
  <div class="modal-body">...</div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="modalRef.close()">
      Close
    </button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
  `,
  providers: [MdbModalService],
})
class DialogCreateStoreComponent {
  constructor() {}
}

@NgModule({
  declarations: [BasicComponent, DialogCreateStoreComponent],
  imports: [BrowserModule],
})
class TestModalModule {}

describe('MDB Modal', () => {
  let fixture: ComponentFixture<BasicComponent>;

  beforeEach(fakeAsync(() => {
    const module = TestBed.configureTestingModule({
      imports: [MdbModalModule, TestModalModule],
      teardown: { destroyAfterEach: false },
    });

    TestBed.compileComponents();
    fixture = module.createComponent(BasicComponent);
  }));

  it('should open a dialog when the button is clicked', fakeAsync(() => {
    const button: HTMLElement = fixture.nativeElement.querySelector('.ms-auto');

    button.click();

    fixture.detectChanges();
    tick(350);

    const dialog: HTMLElement = document.body.querySelector('.modal-content')!;
    expect(dialog).toBeTruthy();
  }));
});