Angular 2和jQuery - 如何测试？

Question

我正在为Angular 2项目使用Angular-CLI(webpack版本),我也需要使用jQuery(遗憾的是.在我的情况下,它是Semantic-UI的依赖,我用它来处理菜单下拉菜单).

我使用它的方式:

npm install jquery --save

然后列在数组中的angular-cli.json文件中scripts:

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

所以它被包含在bundle文件中,这个文件自动用于root html文件:

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

然后declare var $: any;在我需要它的文件中,它运行良好.

但是ng test测试存在问题,因为Karma会抛出错误$ is not defined.

Answer 1

这是因为Karma提供的测试html文件不包含scripts.bundle.js正常服务版本的文件.

解决方案很简单; 您只需将jquery文件的相同路径包含到karma.config.js项目根文件夹中的文件中.该文件位于项目的根目录中.

在files数组中,添加带有这样的watched标志的路径:

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

Karma现在应该知道jQuery依赖.