Angular 角度测试：在使用ng内容的子组件中获取HTML元素

我在为用于显示其内容的组件编写单元测试时遇到问题。在本例中，手风琴仅用于造型目的，但我使用它在整个应用程序中提供设计一致性

我能想出的最简单的模板来显示错误：

一些文本

测试用例如下所示：

it('should find my element', () => {
    fixture = TestBed.createComponent(LoginComponent);

    component = fixture.componentInstance;
    fixture.detectChanges();
    const p = fixture.debugElement.query(By.css('.myClass')).nativeElement;
    p.id;
});

这会引发一个错误：

TypeError: Cannot read property 'nativeElement' of null

以下是每次考试前的

：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ LoginComponent, NgbAccordion ],
      providers : [FormBuilder, ...]
    })
    .compileComponents();
  }));

（其中，

LoginComponent

是测试组件）

我不认为它与

ng template

有关，与以下html一样，元素被正确找到：

不应显示
一些文本

我不知道为什么它不适用于

ngbacordion

，这可能是时间问题吗？由于我不是在嘲笑

ngbacordion

类（我也不想这么做！），我希望它的内容能够正确呈现。是吗，因为html可能是从“ngbacordion”中用“ng content”呈现的？如果是，我可以做什么来访问我的元素

---

非常感谢您的帮助。

当我身上有像这样的外来元素时，这种情况有时也会发生在我身上

不要使用

query

直接进入

nativeElement

或使用

document.querySelector

 const p = fixture.nativeElement.querySelector('.myClass');
 console.log(p); // see if it returns
 const p2 = document.querySelector('.myClass');
 console.log(p2); // see if it returns

如果不起作用，检查

nativeElement

，确保该元素在那里

const nativeElement = fixture.nativeElement;
console.log(nativeElement);

---

编辑：我不完全确定指令的类名是什么（可能是NgBPanelContent），但请确保您的声明数组中有它，以便HTML在看到该指令时知道如何绘制它。

我想您需要等待渲染

// async added here
it('should find my element', async () => {
    fixture = TestBed.createComponent(LoginComponent);

    component = fixture.componentInstance;
    fixture.detectChanges();
    // and await rendering
    await fixture.whenRenderingDone();

    const p = fixture.debugElement.query(By.css('.myClass')).nativeElement;
    p.id;
});

---

您是否在组件中使用onPush更改检测机制？不，不是这样的。组件（.ts）可能为空。我已尝试使用

fakeAsync

和

勾选（500）

等待。。。也没用。要是有一场闪电战就好了。解决方案可能在于本问题中显示的代码片段周围的代码。不幸的是，不是。当记录整个本机元素时，

ngbacordion

在那里，但我的内容不在那里。在测试环境之外查看页面时，它当然会显示出来。也许您需要在声明中包含

ngbPanelContent

指令。我看你是进口的，但我想它不知道怎么画自己。就是这样！也许你可以修改一下你的答案，然后我就接受了。