"TypeError: expect(...).toBeVisible is not a function" Error in Angular 6 karma Tests

Question

I installed the jasmine-jquery-matchers library using npm into my Angular 6 app. Running the tests brings up the following error:

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>'.

Here is my test spec:

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();
  });
});

There are other tests which I did not include because they all work.

Here's the stack trace:

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)

Maybe I need to configure something in karma.conf.js? I did add it as a framework:

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

Any help would be much appreciated!

rob

Answer 1

Well, I found my solution. It was quite a journey.

In the jasmine-jquery-matchers library's custom-typings.d.ts, it says:

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

It then goes on to say:

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

I noticed that jasmine's index.d.ts file declared the "jest-jquery-matchers", so for fun, I added a declaration for jasmine-jquery-matchers as well. Low and behold, that worked!

Any one know why that fixed the errors?

Rob