How to mock/stub a $ JQuery call with Karma-Jasmine?

Question

I'm using jQuery to open a modal on our page. In the component it says:

// @ts-ignore
$('#modal').modal('show');

The ts-ignore is bc we do not import jQuery into the component (don't know how it should work then, but it does).

This snippet is inside some method of the component.

When UnitTesting this method, I obviously want to avoid using jQuery to select the Modal, cause there isn't any DOM available.

So I have to mock it. But all attempts are failing:

// @ts-ignore
spyOn($.fn, 'modal').and.callFake(() => true);

// @ts-ignore
spyOn($('#modal'), 'modal').and.callFake(() => true);

// @ts-ignore
spyOn($, 'modal').and.callFake(() => true);

are all erroring in: modal() method does not exist.

What am I missing here?

Answer 1

I would use and import jQuery like so in Angular https://stackoverflow.com/a/40355691/7365461

In your spec.ts file, try doing:

import * as $ from 'jquery';
....
spyOn(($.fn as any), 'modal').and.callFake(() => true);