运行测试时出现未定义的错误

Question

嗨，我只有@Input参数具有此组件。因此，来自其他stackoverflow成员的建议需要测试数据是否在html中呈现。我已经为此编写了测试用例，但是以某种方式运行测试时，我得到了

TypeError: Cannot read property 'querySelector' of undefined

ts代码：

import { Component, Input } from '@angular/core';
import { XxxInfo } from './xxx-info';

@Component({
    selector: 'wf-xxx-info',
    templateUrl: './xxx-info.component.html'
})
export class XxxInfoComponent{

    @Input() header: XxxInfo;
    constructor() {
    }
}

规范代码：

describe('xxx Information Component',()=>{
let component: XxxInfoComponent;
let fixture: ComponentFixture<XxxInfoComponent>;
let xxxInfo: XxxInfo;
let nativeElement : HTMLElement;

beforeEach(async(()=>{
    TestBed.configureTestingModule({
        imports: [IonicModule],
        declarations: [xxxInfoComponent]
    }).compileComponents();
}));

beforeEach(()=>{
    fixture = TestBed.createComponent(xxxInfoComponent);
    component = fixture.componentInstance;
    let aaa = new AAA();
    aaa = {
        ...
    };
    xxxInfo = new XxxInfo("abc",aaa);
    component.header = xxxInfo;
    fixture.detectChanges();
    nativeElement = fixture.nativeElement;
});
it('should create',()=>{
    expect(component).toBeTruthy();
});
it('should show job code',()=>{
    let code= nativeElement.querySelector('.details').innerHTML;
    expect(code).toEqual('TEST');
});

}）;

我在这里想念什么？任何潜在客户都会有所帮助。