Jest ReferenceError: невозможно получить доступ к «BsNavbarDropdownComponent» перед инициализацией

Я пытаюсь преобразовать свое угловое приложение (монорепозиторий NX) для использования автономных компонентов. Однако при этом мои модульные тесты Jest перестают работать и выдают следующую ошибку:

ReferenceError: Cannot access 'BsNavbarDropdownComponent' before initialization

После долгих поисков неисправностей, похоже, все сводится к следующему:

app.component.ts

import { Component } from '@angular/core';
import { BsNavbarModule } from '@mintplayer/ng-bootstrap/navbar';
// import { BsNavbarModule } from './navbar/navbar.module';

@Component({
  selector: 'video-player-root',
  template: `<h1>ng-video-player</h1>`,
  standalone: true,
  imports: [BsNavbarModule]
})
export class AppComponent {}

app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
      declarations: [],
      providers: []
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

Я скопировал весь BsNavbarModule из моей библиотеки в приложение. Вотминимальная репродукция. Когда используется следующее

import { BsNavbarModule } from '@mintplayer/ng-bootstrap/navbar';

модульный тест завершается неудачей с

ReferenceError: Cannot access 'BsNavbarDropdownComponent' before initialization

Однако, когда используется точно такой же модуль внутри приложения

import { BsNavbarModule } from './navbar/navbar.module';

тест проходит отлично. Почему это? Как это исправить? Я видел массу вопросов с похожим сообщением об ошибке, но не упоминал шутку.

Вы добавили преобразование и модульFileExtensions в jest.config?

Ale_Bianco 29.07.2024 15:29
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
1
66
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

ОБНОВЛЯТЬ:

Не могли бы вы попробовать обновить конструктор файла ниже с помощью forwardRef, это избавит от ошибки.

mintplayer-ng-bootstrap\libs\mintplayer-ng-bootstrap\navbar\src\navbar-item\navbar-item.comComponent.ts

export class BsNavbarItemComponent implements AfterContentChecked {

  constructor(
    private navbar: BsNavbarComponent,
    element: ElementRef,
    private destroy: DestroyRef,
    @Inject(PLATFORM_ID) private platformId: Object,
    @Optional() 
    @Inject(forwardRef(() => BsNavbarDropdownComponent))  // <- changed here!
          parentDropdown: BsNavbarDropdownComponent,
  ) {
    this.element = element;
    this.parentDropdown = parentDropdown;

  }

Репозиторий Github


nx run video-player-demo:test --testFile=apps/video-player-demo/src/app/app.component.spec.ts

Спасибо за ответ. Я попробовал ваше предложение, но, похоже, оно мне не помогло. Я обновил версию ng-bootstrap и использовал эту версию в другом своем приложении . Я перебазировал обе ветки ( ветка 1 / ветка 2 ..

Pieterjan 30.07.2024 10:45

И я все еще получаю ту же ошибку...

Pieterjan 30.07.2024 10:45

@Pieterjan Я просто хотел, чтобы изменение было сделано только для mintplayer-ng-bootstrap, а не для других зависимостей, не могли бы вы вернуть код в исходное состояние, за исключением изменения одной строки в mintplayer-ng-bootstrap, я перепроверю и вернусь к вам с правильным исправлением

Naren Murali 30.07.2024 11:14

@Pieterjan Требуются только указанные выше изменения в обновлении, вы можете игнорировать часть emitDecoratorMetadata.

Naren Murali 30.07.2024 12:14

Вы, сэр, спаситель!! Не могу поверить, что я это просмотрел. Виновницей была круговая зависимость без forwardRef.

Pieterjan 30.07.2024 14:27

@Pieterjan Спасибо, хороший проект, очень структурированная реализация :)

Naren Murali 30.07.2024 14:29

Другие вопросы по теме