Angular 5 karma jasmine-jquery matches

Question

How to integrate karma jasmine jquery matches with angular 5

please give detail answer

i have succesfully loaded jquery in karma config like so

module.exports = function (config) {
  config.set({
    basePath: '',

    frameworks: [ 'jasmine-jquery', 'jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-jasmine-jquery'),
    ],

But i have no clue on how to import it into the spec runner

Here is my current import working fine

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent} from './my.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { exec } from 'child_process';
import { DebugElement } from '@angular/core/src/debug/debug_node';
import { By } from '@angular/platform-browser';

using fixtures are fine

  beforeEach(() => {
    fixture = TestBed.createComponent( MyComponent );
    component = fixture.componentInstance;
    contenTitleEL = fixture.
      debugElement.query( By.css('.contenTitle') ) ;
    fixture.detectChanges();
  });

test is fine using

  it('Should Display contenTitle', () => {
    expect( contenTitleEL ).toContain( contentTitle ) ;
  });

what i want to do is

  it('Should Display contenTitle', () => {
    expect( contenTitleEL ).toHaveText( contentTitle ) ;
  });

Note that i used angular-cli to generate the project

Update

Looks like it is working even thought i am having

error TS2339: Property 'toHaveText' does not exist on type 'Matchers'.

Any idea of how to get arround this error and have the function in code completion

From time to time the ng test refuses to load because of this typescript related error

Answer 1

Finnaly find the answer looks like you need to add this npm package

jasmine-jquery-matchers

configure typestript package with

{
  ....
  "compileOnSave": false,
  "compilerOptions": { 
    "types": [
      "jasmine",
      "jasmine-jquery-matchers"
    ], 
  ....
  }
}

Then last import the package in spec.ts

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