Шутка: издевательство над наблюдаемым и шаблоном

#jestjs #ts-jest #jest-fetch-mock

Вопрос:

У меня есть компонент, который имеет 2 разных состояния, основанных на наблюдаемом, поэтому я подготовил это:

 describe('Has not ID', () => {
   fixture.detectChanges();
   expect(fixture).toMatchSnapshot();
});

describe('Has ID', () => {
    beforeEach(() => {
      component.getData$ = of({
        label: 'B',
      });
    });

    it('B', async () => {
      fixture.detectChanges();

      fixture.whenStable().then(() => {
        fixture.detectChanges();
        expect(fixture).toMatchSnapshot();
      });
    });
  });
 

Для теста A все работает нормально, он загружает метку «A», которая возвращает реальную службу в компоненте:

   getData$ = this.getTemplateOptionById(this.id);
 

служба (издевается):

 getTemplateOptionById(id: number | null): Observable<myClass> {
    return this.select((s) => {
      if (id) {
        return A;
      } else {
        return B;
      }
    });
  }
 

Шаблон довольно простой:

 <div
  *ngIf="getData$ | async as data">
  {{ data.label }}
</div>
 

Когда я запускаю тесты, созданный снимок содержит 2 сценария, но оба с A.

Что я делаю не так?