javascript - Angular 4 testkomponent kvarstår i DOM under Jasmine-tester

När jag kör Jasmine i en riktig webbläsare märkte jag att TestBed-komponentens testfixtur inte förstörs i DOM och kvarstår efter att testerna har avslutats:

Här är en testad komponent:

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

Och ett test (plonk).

  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();
  });

Varför tas inte Test-komponentinstansen bort från DOM och hur bör detta åtgärdas?

Varför läggs fast komponenter överhuvudtaget till i DOM? Kan de kopplas bort från DOM precis som $rootElement i AngularJS?

Svar #1

Varken Jasmine eller Angular kommer någonsin att ta bort det automatiskt, kanske för att hjälpa dig få mer information om din testkörning.

För att ta bort det använder du helt enkelt afterEach(...), som:

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

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

För användare som inte använder Angular:

afterEach(() => {
    document.body.innerHTML = '';
});

Ovan rensar alla standard <script>-taggar, men det spelar ingen roll (eftersom de redan har körts, och Karma uppdaterar aldrig webbläsaren, åtminstone inte förrän alla tester är klara).

Svar #2

En mer kortfattad lösning:

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

Där element är fixture.debugElement.nativeElement

Relaterade artiklar