如何在角度单元测试中访问@Input属性

Question

我正在为具有@Input属性的简单角度组件编写一个开玩笑的单元测试。

这是我的组件

import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-title',
template: '<h2 id="title" class="title">{{title}}</h2>',
styleUrls: ['./title.component.scss'],
})
export class TitleComponent implements OnInit {
@Input() title;
constructor() { }
ngOnInit() {
}
}

我的单元测试文件

describe('TitleComponent', () => {
let component: TitleComponent;
let fixture: ComponentFixture<TitleComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
],
declarations: [TitleComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(TitleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should show TEST INPUT', () => {
component.title = 'test title';
fixture.detectChanges();
const input = fixture.nativeElement.querySelector('h2').innerText;
console.log(input);
expect(input).toEqual('test title');
});
});

控制台.log(输入(始终未定义，我的测试用例失败。 我在这里做错了什么？ 🤔

Answer 1

它应该是innerHTML或textContent而不是innerText。然后它起作用了。

fixture.nativeElement.querySelector('h2').innerHTML;

原因是jest使用JSDom，而在JSDom中，innerText属性尚未实现。 内部文本实现 #1245