Angular 2和jQuery - 如何測試?

[英]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).

我正在為Angular 2項目使用Angular-CLI(webpack版本),我還需要使用jQuery(遺憾的是。在我的情況下,它是Semantic-UI的依賴,我用它來處理菜單下拉菜單)。

The way I am using it:


npm install jquery --save

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


scripts": [

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

所以它被包含到bundle文件中,這個文件自動用於root html文件:

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

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

然后聲明var $:any;在我需要它的文件中,它運作良好。

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


1 个解决方案



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.




粤ICP备14056181号  © 2014-2021