Angular6 Jasmine TypeError: expect(…).toBeVisible

Question

Setting up jasmine-query-matches in angular6

On angular 5 project it looks at simple as

import { } from 'jasmine-jquery/lib/jasmine-jquery';
import { } from 'jasmine-jquery-matchers';
import * as $ from 'jquery';

On angular 6 i have tried the following

import {} from "jasmine-jquery/lib/jasmine-jquery" ;
import {} from "jasmine-jquery-matchers/dist/jasmine-jquery-matchers" ;
import { } from "karma-jasmine-jquery";
import * as $ from 'jquery';

OR

import {} from "jasmine-jquery" ;
import {} from "jasmine-jquery-matchers" ;
import { } from "karma-jasmine-jquery";
import * as $ from 'jquery';

Usage as follows

imagesEL = fixture.debugElement.query(By.css('.cycle'));

and

expect(imagesEL).toBeVisible();

or

expect(imagesEL.nativeElement).toBeVisible();

But every thing seems to be giving the same error

TypeError: expect(...).toBeVisible is not a function

Thanks for helping

Sample Code : https://stackblitz.com/edit/ng-test-tobevisible?file=app/hello.component.spec.ts

Answer 1

toBeVisible() should be applied on nativeElement

imagesEL = fixture.debugElement.query(By.css('.cycle'));
expect(imagesEL.nativeElement).toBeVisible();

Answer 2

try to use this as your imports

import "jasmine-jquery/lib/jasmine-jquery" ;
import "jasmine-jquery-matchers/dist/jasmine-jquery-matchers" ;
import "karma-jasmine-jquery";
import 'jquery';

Please note that jasmine-jquery-matchers does not have a default export