角度测试组件显示在测试窗口中

Question

当我运行测试时，发生了一件奇怪的事情。由于某些原因，组件在测试所在的DOM中显示。同样有趣的是，一次仅出现一个 组件。我进行的每项测试都会发生这种情况。

屏幕截图显示了最少的干扰情况。

Answer 1

使用Angular TestBed执行组件测试时，被测组件将附加到测试运行程序的DOM上，使您可以检查DOM或模拟用户交互。

来自Angular Docs：

一个组件，与Angular应用程序的所有其他部分不同， 结合了HTML模板和TypeScript类。真正的组件 是模板和类一起工作的。充分测试 组件，则应测试它们是否可以按预期工作。

此类测试需要在组件中创建组件的host元素。 像Angular一样浏览器DOM，并调查组件类的 按其模板所述与DOM交互。

生成的DOM元素不会自动删除。但是，您可以在afterEach（）或afterAll（）中将其删除。

describe("TestComponent", () => {
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
  });

  it("should have an awesome feature", () => {
    // ...
  });

  afterEach(() => {
    document.body.removeChild(fixture.nativeElement);
  });
});

可以像测试服务类那样通过单独测试组件类来避免创建组件的宿主元素。当然，这只能告诉您有关类的行为-没有DOM集成或交互。

describe("TestComponent", () => {
  it("should have an awesome feature", () => {
    const comp = new TestComponent();
    // ...
  });
});