Тайм-ауты теста Jasmine с «Асинхронный обратный вызов не был вызван в течение 5000 мс», хотя в моих тестах проекта Angular не используется асинхронная функция

Question

Вот исходный код:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';

import { HomePage } from './home.page';
import { LevelGridComponent } from '../level/level-grid/level-grid.component';
import { SidebarComponent } from '../sidebar/sidebar.component';
import { LevelStatusSidebarComponent } from '../level/level-status-sidebar/level-status-sidebar.component';

describe('HomePage', () => {
  let component: HomePage;
  let fixture: ComponentFixture<HomePage>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        HomePage,
        LevelGridComponent,
        SidebarComponent,
        LevelStatusSidebarComponent
      ],
      imports: [IonicModule.forRoot()]
    }).compileComponents();

    fixture = TestBed.createComponent(HomePage);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Теперь тест открывает браузер, визуализирует компонент, а затем ничего не делает, в течение 5 секунд, и (таким образом) время ожидания истекло:

Домашняя страница должна создать ошибку FAILED: Тайм-аут - асинхронный обратный вызов не был вызван в течение 5000 мс (установлен jasmine.DEFAULT_TIMEOUT_INTERVAL) в node_modules / jasmine-core / lib / jasmine-core / jasmine.js (строка 5494)

То, что происходило до

Раньше у меня была обычная ошибка Angular «этот модуль не определен», то есть:

'app-level-status-sidebar 'не является известным элементом:
1. Если' app-level-status-sidebar 'является угловым компонентом, то убедитесь, что он является частью этого модуля.
2. Если' app-level-status-sidebar 'является веб-компонентом, затем добавьте' CUSTOM_ELEMENTS_SCHEMA 'к' @ NgModule.schemas 'этого компонента, чтобы подавить это сообщение. ("

Чтобы исправить это, я добавил реальные компоненты к" объявлениям ", как вы можете видеть выше.

Я думаю, это было потому, что в HTML, который я использовалдругие компоненты, то есть те, которые я добавил выше.

---

Поскольку тест на самом деле очень прост, я не ожидаю каких-либо проблем здесь, и он также, кажется, работает (я добавил консоль. операторы журнала, и они были выполнены в it('should create'.) Поскольку тестовая функция на самом деле не инициирует какую-либо асинхронную функцию и является на 100% синхронной, я не ожидала, что здесь произойдет ошибка.

Для тестирования я такжедобавил явный done вызов функции к тестовой функции it и вызов ее в конце, но это ничего не меняет.

---

Редактировать: Я думаю, что ячтобы решить эту проблему. Поэтому кажется:

• обычно ™ Мне не нужно указывать компоненты, которые тестируемый компонент использует в «объявлениях» TestBet. (Все остальные тесты делают то же самое и работают безпроблемы)
• асинхронная вещь / тИмер, вызывающий проблему, на самом деле кажется таймером в LevelStatusSidebarComponent, который отсчитывает от 5 секунд до 0 секунд (в наблюдаемой).

Вот исходный код таймера:

public timeLeft = 5;
// […]

private startTimer() {
    const counter$ = interval(1000);

    const takeFourNumbers = counter$.pipe(
      take(this.timeLeft),
      takeUntil(this.ngUnsubscribe)
    );
    takeFourNumbers.subscribe(x => {
      this.timeLeft--;
      if (this.timeLeft === 0) {
        this.levelTimeout.emit();
      }
    });
  }

Это все еще не решает первую проблему с определением компонентов внутри тестов, потому что ошибка все еще происходит, поэтому мне все еще нужно определить их. И я до сих пор не понимаю технических деталей, почему случайная неразрешенная наблюдаемая внутри цепочки зависимостей компонента приводит к тому, что компонент как-то «истекает» в тесте. (даже если это просто проверено, чтобы быть "правдивым", то есть существовать)

Answer 1

Если вы проводите модульное тестирование своей домашней страницы, вам не следует добавлять дочерние компоненты в ваши объявления. Вместо этого вы можете просто создать Stubbed версию этого компонента. Вы можете просто поместить что-то похожее на приведенное ниже в нижней части вашего spec-файла и вместо этого добавить StubLeveltatusSidebarComponent к своим объявлениям (вам также может понадобиться заглушить входные данные).

@ Component ({selector: 'app-level-status-sidebar ', template:' '})

class StubLevelStatusSidebarComponent {}

В качестве альтернативы вы можете попробовать добавить нижеприведенное в ваш объект configureTestingModule, и он должен игнорировать отсутствующиеошибки детей и продолжайте тесты.

схемы: [NO_ERRORS_SCHEMA]