Я пытаюсь написать модульные тесты 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(...)
тест проходит отлично.
Что является причиной этого? Как я могу это исправить?
Обновлено: Кажется, существует существующая проблема по этому поводу.
Вот чем вы можете заняться, пока мы ждем объединения открытого пиара.
Убедитесь, что компонент, который вы пытаетесь протестировать, является автономным, в вашем примере это будет 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>();
}
Надеюсь, поможет!
Спасибо приятель. Это помогло на данный момент