运行单元测试时关闭渲染组件到 DOM答案

【问题标题】：Turn off rendering component into DOM while running unit test运行单元测试时关闭渲染组件到 DOM
【发布时间】：2018-02-21 01:03:52
【问题描述】：

我最近学会了测试角度组件。我在 chrome 中使用 karma-jasmine-launcher 使用了以下代码

let fixture = TestBed.createComponent(AboutComponent);
let cut = fixture.componentInstance;
let element: Document = fixture.nativeElement;

// Run the changes
fixture.detectChanges();
let emailEle = element.querySelector('.email');

expect(emailEle.innerHTML).toEqual('email_test');

上述测试按预期工作，但我看到 AboutComponent 在运行测试时将 HTML 渲染到 DOM？这是它的工作方式吗？对于运行单元测试，我想关闭 DOM 渲染？我们可以关闭将元素渲染到 DOM 中吗？任何帮助是极大的赞赏。

【问题讨论】：

您不能在测试 DOM 交互时停用 DOM 渲染（又名：let emailEle = element.querySelector('.email');）。如果您只想测试内部逻辑，则可以注入您的组件（ (at)Component extends (at)Injectable ）并进行一些逻辑单元测试，而无需在 DOM 中实例化该组件（整个目的à夹具）

标签： angular karma-runner karma-jasmine

【解决方案1】：

我认为您应该在测试组件时渲染 DOM；这就是为什么如何不渲染 DOM 并不明显。相比 AngularJS，我喜欢 Angular 新版本的一件事是渲染 DOM 是多么容易。

但是，如果您出于某些疯狂的原因不想在测试中呈现 DOM，那么您基本上只是少用框架。我要做的是手动“新建”组件：

// first get your component dependencies
const myService = TestBed.get(MyService);
const someOtherDep = TestBed.get(SomeOtherDependency);

// next instantiate your component
const component = new AboutComponent(myService, someOtherDep);

【讨论】：