Angular 4 fixture component persists in DOM during Jasmine tests

Question

When running Jasmine in real browser I noticed that TestBed fixture component isn't destroyed in DOM and persists after tests have ended:

Here's a tested component:

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

And a test (plunk).

  let component;   let fixture;   let element;    beforeAll(() => {     TestBed.resetTestEnvironment();      TestBed.initTestEnvironment(       BrowserDynamicTestingModule,       platformBrowserDynamicTesting()     );   });    beforeEach(() => {     TestBed.configureTestingModule({       declarations: [Test],     })     .compileComponents();      fixture = TestBed.createComponent(Test);     component = fixture.componentInstance;     element = fixture.debugElement.query(By.css('div')).nativeElement;      fixture.detectChanges();   });    afterEach(() => {     fixture.destroy();   });    it('should compile Test', () => {     expect(element).toBeTruthy();   }); 

Why Test component instance isn't removed from DOM and how this should be fixed?

Why are fixture components added to DOM at all? Can they be detached from DOM like $rootElement in AngularJS?

Answer 1

I think Angular does not remove it automatically to help you to get more details about your test execution. To remove it you simply use afterEach:

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