Javascript Jasmine测试期间，Angular 4 fixture组件在DOM中持续存在

在real browser中运行Jasmine时，我注意到，

TestBed

fixture组件在DOM中没有被破坏，并且在测试结束后仍然存在：

这是一个经过测试的组件：

@Component({
  selector: 'test-app',
  template: `<div>Test</div>`,
})
class Test {}

为什么不从DOM中删除

Test

组件实例，以及如何修复

---

为什么要将夹具组件添加到DOM中？它们可以像AngularJS中的

$rootElement

那样从DOM中分离吗？

我认为AngularJS不会自动删除它来帮助您获得有关测试执行的更多细节。要删除它，只需在每次之后使用：

beforeEach(() => {
  fixture = TestBed.createComponent(MyComponent);
  comp = fixture.componentInstance;
  debugElement = fixture.debugElement;
  element = debugElement.nativeElement;
});

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

---

请看一下以下问题：

1） 首先，你打电话来

fixture.destroy();

在每个之后的中，因此在it部分之后调用它。也就是说，在部分中，夹具仍未损坏

2） 通过什么代码可以检测到元素仍然存在于DOM中？从另一个角度来看：为什么jasmine/browser应该删除该元素（jasmine/browser应该是什么原因）？我可以建议以下用例：

2.1）一个组件在另一个组件中使用，应通过某些更改创建/销毁。即ngIf或ngSwitchCase：

<parent-component>
    <child-component *ngIf="someChangeInComponent1"></child-component>
</parent-component>

---

不仅对于单元测试，而且对于tslint，没有错误是一种很好的做法。

更简洁的解决方案：

afterEach(() => {
  element.remove()
});

---

其中

element

是

fixture.debugElement.nativeElement

我还体验到测试用例对

DOM

所做的更改，如下所示：

let password = fixture.debugElement.query(By.css('input[id=password]')).nativeElement
    password.value = 'somePassword';

在其他测试中保持一致。我能够通过在每次之后使用以下

方法解决此问题：

afterEach(() => {
    TestBed.resetTestingModule();
  });

通过什么代码可以检测到元素仍然存在于DOM中？通过我自己的眼睛。你可以在问题中发布的一条消息中看到这一点。什么原因应该让jasmine/浏览器-因为我们可以。这是茉莉花的核心特征之一。没有明显的理由，他会毁了这份报告。我想知道为什么会这样，考虑到在AngularJS中是可以的。我相信OP结尾的问题足够具体。@estus，这可能是某种回归。需要更多的调查。下面的url可能会让你感兴趣：谢谢。看起来它很久以前就修好了。我认为这与测试床的工作方式有关，很可能这就是默认情况下它的工作方式。只是不知道为什么，如果可能的话，如何改变。谢谢，回答了一个问题，这应该如何解决？其余的问题仍然相关
Implement lifecycle hook interface OnDestroy for method ngOnDestroy in class ...

afterEach(() => {
  element.remove()
});

let password = fixture.debugElement.query(By.css('input[id=password]')).nativeElement
    password.value = 'somePassword';

afterEach(() => {
    TestBed.resetTestingModule();
  });