Модульный тест angular jest не работает на contentChildren, но работает с декоратором @ContentChildren

Я пытаюсь написать модульные тесты Jest для базового компонента Angular. Но, похоже, я наткнулся на странную ошибку. Минимальная репродукция размещена здесь.

При запуске теста с использованием VS Code и расширения Jest Runner я получаю следующую ошибку:

Ошибка типа: невозможно прочитать свойства неопределенного значения (чтение «Символ (СИГНАЛ)»)

Вот мой спекфайл

@Component({
    selector: 'demo-checkbox-test',
    template: `
        <div bsCheckboxGroup>
            <bs-checkbox>
                This is a checkbox
            </bs-checkbox>
        </div>`
})
class BsCheckboxTestComponent { }

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

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            imports: [
                // Mock dependencies
            ],
            declarations: [
                // Unit to test
                BsCheckboxComponent,

                // Mock dependencies
                MockDirective(BsCheckboxGroupDirective),

                // Testbench
                BsCheckboxTestComponent,
            ]
        }).compileComponents();

        fixture = TestBed.createComponent(BsCheckboxTestComponent);
        await fixture.whenStable();
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

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

И вот мой тестируемый модуль

@Component({
    selector: 'bs-checkbox',
    template: `
        <label>
            <input type = "checkbox">
        </label>`
})
export class BsCheckboxComponent {}

Тестовый стенд имитирует следующую директиву :

@Directive({
    selector: '[bsCheckboxGroup]',
})
export class BsCheckboxGroupDirective {
    name = input.required<string>();
    children = contentChildren(forwardRef(() => BsCheckboxComponent));
    // @ContentChildren(forwardRef(() => BsCheckboxComponent)) children!: QueryList<BsCheckboxComponent>;
}

Примечательно, что при использовании декоратора @ContentChildren(...) вместо функции contentChildren(...) тест проходит отлично.

Что является причиной этого? Как я могу это исправить?

Обновлено: Кажется, существует существующая проблема по этому поводу.

Тестирование функциональных 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
2
0
100
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вот чем вы можете заняться, пока мы ждем объединения открытого пиара.

Убедитесь, что компонент, который вы пытаетесь протестировать, является автономным, в вашем примере это будет BsCheckboxTestComponent.

Разделите настройку TestBed на разделы «Конфигурация» и «Инициализация»:

beforeEach(async () => {
    await TestBed.configureTestingModule({
        imports: [
            // Mock dependencies
        ],
        declarations: [
            // Testbench
            BsCheckboxTestComponent,
            // Don't Mock your Directive here!
            // MockDirective(BsCheckboxGroupDirective)
        ]
    }).compileComponents();
});

// Do it here by replacing it from your Component's imports
beforeEach(() => {
    TestBed.overrideComponent(BsCheckboxTestComponent, {
        remove: { imports: [BsCheckboxGroupDirective] },
        add: { imports: [BsCheckboxGroupMockDirective] }
    });
});

// Now we can initialize it
beforeEach(async () => {
    fixture = TestBed.createComponent(BsCheckboxTestComponent);
    await fixture.whenStable();
    component = fixture.componentInstance;
    fixture.detectChanges();
});

Последняя часть — это созданный вручную макет вашей BsCheckGroupDirective:

@Directive({
    selector: '[bsCheckboxGroup]',
    standalone: true
})
class BsCheckGroupMockDirective{
    public name= input<string>();
}

Надеюсь, поможет!

Спасибо приятель. Это помогло на данный момент

Pieterjan 11.07.2024 20:04

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