jQuery is not defined error in karma tests

Question

I am using jQuery in my angular 5 app which works perfectly but I have an issue with karma tests.

import { ElementRef } from '@angular/core';
declare var jQuery: any;

export class Item {

constructor(private element: ElementRef) {
    this.init();
}

private init() {
    this.$item = jQuery(this.element.nativeElement);
...

error

ReferenceError: jQuery is not defined.

package.json

"dependencies": {
  "jquery": "3.1.1"
}

I have added jquery to my karma.conf but that didn't help.

files: [
        'node_modules/core-js/client/shim.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/zone.js/dist/proxy.js',
        'node_modules/zone.js/dist/sync-test.js',
        'node_modules/zone.js/dist/jasmine-patch.js',
        'node_modules/zone.js/dist/async-test.js',
        'node_modules/zone.js/dist/fake-async-test.js',
        'node_modules/tslib/tslib.js',
        'node_modules/jquery/dist/jquery.js',

        {pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false },
        {pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false },
        {pattern: '../karma-test-shim.js', included: true, watched: true},
        {pattern: 'node_modules/@angular/**/*.js', included: false, watched: false},
        {pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false},
        {pattern: 'node_modules/@ng-idle/core/bundles/core.umd.js', included: false, watched: false},
        {pattern: 'node_modules/bowser/bowser.js', included: false, watched: false},
        {pattern: 'node_modules/bootstrap/dist/js/bootstrap.js', included: false, watched: false},
        {pattern: 'node_modules/tslib/tslib.js', included: false, watched: false},
        {pattern: 'node_modules/jquery/dist/jquery.js', included: false, watched: false}
    ],
    proxies: {
        "/node_modules/": "../../node_modules/"
    },
    autoWatch: true,
    browsers: ['PhantomJS', 'Chrome', 'HeadlessChrome'],
    singleRun: false
});
};

can you someone please help?

Thanks in advance.

Repro

Answer 1

Above answers seems out of date as of Angular 6 / Karma 1.7.1 / Jasmine 2.99 + Since they have asked to remove file and preprocessor entries from karma.conf.js.

You need to add this (note the scripts property of the test configuration) to theangular.json file

"test": {
  "builder": "@angular-devkit/build-angular:karma",
  "options": {
    "main": "src/test.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "src/tsconfig.spec.json",
    "karmaConfig": "src/karma.conf.js",
    "styles": [],
    "scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/datatables.net/js/jquery.dataTables.js"
    ]
  }
},

Sennet

Answer 2

Include the jQuery path in the karma.conf.js

module.exports = function(config) {
  config.set({
    files: [
      'path_to/jquery.js'
      ...
    ],
  });
};

Martinson

Hello this answer seems out of date as of Angular 6 / Karma 1.7.1 / Jasmine 2.99 + Since they have asked to remove file and preprocessor entries from karma.conf.js. So I dont know what to do to define Jquery. Though I found some libs, that I need to test [github.com/bessdsv/karma-jasmine-jquery] AND [github.com/scf2k/karma-jquery] – Hegarty

Answer 3

Looks like you have added jquery in twice:

files: [
        .....
        'node_modules/jquery/dist/jquery.js',

        .....
        {pattern: 'node_modules/jquery/dist/jquery.js', included: false, watched: false}
    ],

The second time you have added it you have explicitly stated that you don't want to include it. I think you just need to remove this second line.

Denton