Matúš Wewo Bielik Matúš Wewo Bielik - 3 years ago 94
jQuery Question

Angular 2 and jQuery - how to test?

I am using Angular-CLI (webpack version) for my Angular 2 project and I also need to use jQuery (sadly. In my case, it's a dependency of Semantic-UI and I am using it for handling menu dropdowns).

The way I am using it:

npm install jquery --save


Then listing in it
angular-cli.json
file in the
scripts
array:

scripts": [
"../node_modules/jquery/dist/jquery.min.js"
]


So it gets included into bundle file and this file is automatically used to root html file:

<script type="text/javascript" src="scripts.bundle.js">


Then
declare var $: any;
in files where I need it and it works well.

However there is a problem with
ng test
tests, as Karma throws an error
$ is not defined
.

Answer Source

This is because the testing html file, provided by Karma, doesn't include the scripts.bundle.js file as normally served version does.

The solution is easy; you just include same path to the jquery file into karma.config.js file in project's root folder. This file is available at the root of the project.

In files array, add the path with watched flag like this:

files: [
  { pattern: './node_modules/jquery/dist/jquery.min.js', watched: false },    
  { pattern: './src/test.ts', watched: false }
]

Karma now should know about the jQuery dependency.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download