Я пытаюсь преобразовать свое угловое приложение (монорепозиторий 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';
тест проходит отлично. Почему это? Как это исправить? Я видел массу вопросов с похожим сообщением об ошибке, но не упоминал шутку.
Не могли бы вы попробовать обновить конструктор файла ниже с помощью forwardRef
, это избавит от ошибки.
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;
}
nx run video-player-demo:test --testFile=apps/video-player-demo/src/app/app.component.spec.ts
Спасибо за ответ. Я попробовал ваше предложение, но, похоже, оно мне не помогло. Я обновил версию ng-bootstrap и использовал эту версию в другом своем приложении . Я перебазировал обе ветки ( ветка 1 / ветка 2 ..
И я все еще получаю ту же ошибку...
@Pieterjan Я просто хотел, чтобы изменение было сделано только для mintplayer-ng-bootstrap
, а не для других зависимостей, не могли бы вы вернуть код в исходное состояние, за исключением изменения одной строки в mintplayer-ng-bootstrap
, я перепроверю и вернусь к вам с правильным исправлением
@Pieterjan Требуются только указанные выше изменения в обновлении, вы можете игнорировать часть emitDecoratorMetadata
.
Вы, сэр, спаситель!! Не могу поверить, что я это просмотрел. Виновницей была круговая зависимость без forwardRef
.
@Pieterjan Спасибо, хороший проект, очень структурированная реализация :)
Вы добавили преобразование и модульFileExtensions в jest.config?