Cannot access 'NgbNavLink' before initialization

Question

I am trying to test a component containing a component from ng-bootstrap, in Angular 13 using Jest and get the following error: Cannot access 'NgbNavLink' before initialization.

I have a component MyComponent which is using a NgbModal. I just want to create the test for this component, so I need to import NgbModule in my test. However, the import doesn't seem to work as I get the following error:

 FAIL  src/app/pages/kafkaconnect/kafkaconnect.component.spec.ts
  ● Test suite failed to run

    ReferenceError: Cannot access 'NgbNavLink' before initialization

      2 |
      3 | import { MyComponent } from './mycomponent.component';
    > 4 | import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
        | ^

      at Object.<anonymous> (node_modules/@ng-bootstrap/ng-bootstrap/fesm2015/ng-bootstrap.mjs:6651:991)
      at Object.<anonymous> (src/app/pages/kafkaconnect/kafkaconnect.component.spec.ts:4:1)

Here is my test class:

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

import { MyComponent } from './mycomponent.component';
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      imports: [ NgbModule ],
    })
    .compileComponents();
  });

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

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

I am using Angular 13, ng-bootstrap 11.0.0-rc.0 and bootstrap 4.6.1. I know that these versions are very recent but I don't get any error serving or building my application, though.

Angular CLI: 13.0.3
Node: 16.13.0
Package Manager: npm 8.1.0
OS: win32 x64

Angular: 13.0.2
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.3
@angular-devkit/build-angular   13.0.3
@angular-devkit/core            13.0.3
@angular-devkit/schematics      13.0.3
@angular/cli                    13.0.3
@schematics/angular             13.0.3
rxjs                            6.6.7
typescript                      4.4.4

Finally, I am using jest 27.3.1. As I am using Angular, I have configured jest-preset-angular following this documentation.

Any lead on why I'd get this error?

Answer 1

The issue seemed to be with ng-bootstrap 11.0.0-rc.0. Upgrading to ng-bootstrap 12.0.0-beta.4 fixed the issue.