Ng5 Karma Jasmine test renders component instead of result page

I am not really sure why the DOM compilation of the component stays after the test ends, but I noticed it happens only for the last test that ran. If you can add another component test that also compiles a component but doesn't add a full-screen component, the previous one is correctly removed. So, simply adding more tests could be the easiest solution.

But if that's not enough, here goes two possible solutions:

1. Don't compile it

If your tests don't involve verifying the resulting DOM, you can simplify the arrangement of your test by using the component directly.

describe('MyComponent', () => {
  TestBed.configureTestingModule({
    // declarations: [MyComponent],
    imports: [
      HttpClientTestingModule,
      FormsModule,
      RouterTestingModule.withRoutes([{ path: 'home', redirectTo: '/' }]),
    ],
    // 1. Add the component as a provider.
    providers: [MyComponent, SomeService1, SomeService2, { provide: SomeService3, useValue: {} }],
    schemas: [NO_ERRORS_SCHEMA],
  });

  it('should do thing #1', () => {
    // 2. Test it like you would test a service.
    const comp = TestBed.get(MyComponent);
    expect(comp.value).toBe(false, 'off at first');
    comp.doThing1();
    expect(comp.value).toBe(true, 'on after click');
    comp.doThing1();
    expect(comp.value).toBe(false, 'off after second click');
  });

  it('should do thing #2', () => {
    const comp = TestBed.get(MyComponent);
    expect(comp.value2).toMatch(/is off/i, 'off at first');
    comp.doThing2();
    expect(comp.value2).toMatch(/is on/i, 'on after clicked');
  });
});

More info here.

2. Remove it from DOM

If you do need to test the DOM, the only workaround I have found is to explicitly remove the HTML element after finishing the tests.

  afterEach(() => {
    if (fixture.nativeElement && 'remove' in fixture.nativeElement) {
      (fixture.nativeElement as HTMLElement).remove();
    }
  });