«Ошибка типа: ожидаем (...). ToBeVisible не является функцией» Ошибка в тестах кармы Angular 6

Question

Я установил библиотеку jasmine-jquery-matchers, используя npm, в свое приложение Angular 6.Запуск тестов вызывает следующую ошибку:

ERROR in [at-loader] 
./src/app/landing/components/title/title.component.spec.ts:51:30
    TS2339: Property 'toBeVisible' does not exist on type 'Matchers<any>'.

Вот моя спецификация теста:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TitleComponent } from './title.component';
import { FormsModule } from '@angular/forms';
import { RouterTestingModule } from '@angular/router/testing';
import { UserInfoService } from '../../../shared/services/user-info.service';
import {DebugElement} from "@angular/core";
import {By} from "@angular/platform-browser";
import { matchers } from "jasmine-jquery-matchers/dist/jasmine-jquery-matchers" ;

describe('Title Component', () => {
  let component: TitleComponent;
  let fixture: ComponentFixture<TitleComponent>;
  let userInfoService: UserInfoService;
  let el: DebugElement; 
  //const matchers = window['jasmine-jquery-matchers'];

  beforeEach(() => {
    jasmine.addMatchers(matchers);

    TestBed.configureTestingModule({
      imports: [ FormsModule, RouterTestingModule ],
      declarations: [ TitleComponent ],
      providers: [ UserInfoService ]
    });

    fixture         = TestBed.createComponent(TitleComponent);
    component       = fixture.componentInstance;
    userInfoService = TestBed.get(UserInfoService);
  });


  it("should be visible when the user service's isPageTitleEnabled() method returns true", () => {
    el = fixture.debugElement.query(By.css('div.tc-title')); 
    spyOn(<any>UserInfoService.prototype, 'isPageTitleEnabled').and.returnValue(true);
    fixture.detectChanges();
    expect(el.nativeElement.children.length).toEqual(1);
    el = el.query(By.css('span.tc-header-title')); 
    expect(el.nativeElement).toBeVisible();
  });
});

Существуют другие тесты, которые я не включил, потому что они все работают.

Вот трассировка стека:

TypeError: expect(...).toBeVisible is not a function
            at <Jasmine>
            at UserContext.<anonymous> (webpack:///src/app/landing/components/title/title.component.spec.ts:44 <- config/spec-bundle.js:103558:34)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (webpack:///node_modules/zone.js/dist/zone.js:388 <- config/spec-bundle.js:100764:26)
            at ProxyZoneSpec../node_modules/zone.js/dist/proxy.js.ProxyZoneSpec.onInvoke (webpack:///node_modules/zone.js/dist/proxy.js:128 <- config/spec-bundle.js:100252:39)
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (webpack:///node_modules/zone.js/dist/zone.js:387 <- config/spec-bundle.js:100763:32)
            at Zone../node_modules/zone.js/dist/zone.js.Zone.run (webpack:///node_modules/zone.js/dist/zone.js:138 <- config/spec-bundle.js:100514:43)
            at runInTestZone (webpack:///node_modules/zone.js/dist/jasmine-patch.js:145 <- config/spec-bundle.js:99817:34)
            at UserContext.<anonymous> (webpack:///node_modules/zone.js/dist/jasmine-patch.js:160 <- config/spec-bundle.js:99832:20)
            at <Jasmine>
            at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (webpack:///node_modules/zone.js/dist/zone.js:421 <- config/spec-bundle.js:100797:31)
            at Zone../node_modules/zone.js/dist/zone.js.Zone.runTask (webpack:///node_modules/zone.js/dist/zone.js:188 <- config/spec-bundle.js:100564:47)
            at drainMicroTaskQueue (webpack:///node_modules/zone.js/dist/zone.js:595 <- config/spec-bundle.js:100971:35)

Может быть, мне нужно что-то настроить в karma.conf.js?Я добавил его в качестве основы:

frameworks: ['jasmine', "jasmine-jquery-matchers"],

Любая помощь будет высоко ценится!

rob

Answer 1

Ну, я нашел свое решение.Это было настоящее путешествие.

В custom-typings.d.ts библиотеки jasmine-jquery-matchers она говорит:

* You can include your type definitions in this file until you create one for the @types

Далее говорится:

// support NodeJS modules without type definitions
declare module '*';

Я заметил, что файл index.d.ts в jasmine объявляет "jest-jquery-matchers", поэтому для интереса я также добавил объявление для jasmine-jquery-matchers.Низко и вот, это сработало!

Кто-нибудь знает, почему это исправило ошибки?

Роб