Angular Karma tests timeout testing AppComponent with CUSTOM_ELEMENTS_SCHEMA

I was adding an app-component test to my Angular project, when I suddenly a timeout occurred while running all tests:

[launcher]: Launching browsers headless with concurrency unlimited
 21% building 95/96 modules 1 active .../src/css/public.scss19 [launcher]: Starting browser ChromeHeadless
[HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Connected on socket -d4Du6uXE65XhnZkAAAA with id 51932343
[HeadlessChrome 75.0.3770 (Mac OS X 10.14.5)]: Disconnected (0 times), because no message in 30000 ms.

my recently added test app.component.spec.ts:

...
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      imports: [RouterTestingModule],
      declarations: [AppComponent],
      providers: [...],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });

});

Nothing was being tested. After a while I figured the CUSTOM_ELEMENTS_SCHEMA caused the timeout. Now, I have a custom element in my app.component.html, which is why I added the schema. Removing the schema (and removing the element from the html) fixes the problem.

Why does adding the schema cause the karma-headlessChrome timeout?
Also, is it bad practice to add custom elements to the app-component?

Source: New feed