初始化前无法访问 'NgbNavLink'

Question

我正在尝试测试包含来自 ng-bootstrap 的组件的组件，在 Angular 13 使用 Jest 并得到以下错误：Cannot access 'NgbNavLink' before initialization.

我有一个组件 MyComponent，它使用 NgbModal。我只想为这个组件创建测试，所以我需要在我的测试中导入 NgbModule。但是，导入似乎不起作用，因为我收到以下错误：

 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)

这是我的测试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();
  });
});

我正在使用 Angular 13、ng-bootstrap 11.0.0-rc.0 和bootstrap 4.6.1。我知道这些版本是最新的，但是我在服务或构建我的应用程序时没有遇到任何错误。

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

最后，我正在使用 jest 27.3.1。当我使用 Angular 时，我在 this documentation.

之后配置了 jest-preset-angular

关于我为什么会收到此错误的任何线索？

Answer 1

问题似乎与 ng-bootstrap 11.0.0-rc.0 有关。升级到 ng-bootstrap 12.0.0-beta.4 解决了这个问题。

初始化前无法访问 'NgbNavLink'

Cannot access 'NgbNavLink' before initialization

typescript

jestjs

ng-bootstrap

angular

angular13