本文摘自PHP中文网,作者青灯夜游,侵删。
本篇文章和大家聊聊Angular中的单元测试,通过示例介绍一下单元测试工具(Karma + Jasmine)的使用方法。做了多年的Angular的前端开发,一直没有胆量对前端进行单元测试,原因一是前端是跟用户打交道,不好测试,原因二是项目的时间压力没有精力弄单元测试。这也就导致在前端开发时,业务一旦改变,就要人肉进行测试。费时又没有技术含量,直接让我怀疑人生。
最近得空,索性就把Angular的单元测试研究了一把。Angular其实自己有单元测试的工具:Karma + Jasmine:
- Karma:Karma是为测试JavaScript代码而生的自动化测试管理工具,可监控文件的变化,自动执行测试。
- Jasmine:用来编写Javascript测试的的框架。
【相关教程推荐:《angular教程》】
第一个测试用例
当创建Angular应用后,在package.json文件中已经添加了Karma和Jasmine的依赖性:
1 2 3 4 5 |
|
做过后端测试的同行,估计已经知道这些组件的分工了:
- karma:Karma核心组件
- karma-chrome-launcher:Chrome发射器,测试会在Chrome上执行
- karma-coverage-istanbul-reporter:coverage报告
- karma-jasmine:Jasmine核心组件
- karma-jasmine-html-reporter:Html测试报告
在src目录下会看到名为:karma.conf.js、test.ts的两个文件。
karma.conf.js:Karma的配置文件,其中需要重点关注的配置有:
frameworks:使用的测试框架,这里使用Jasmine
port:测试使用的端口
autoWatch:是否自动监测测试代码的改变,自动执行测试
plugins:测试使用到的插件,与package.json文件保持一致
browsers:测试运行使用的浏览器,这里使用Chrome,如果你需要使用其他浏览器,需要通过npm安装浏览器发射器,并在plugins和这里设置,例如使用Safari:
1
2
3
4
5
6
npm install karma-safari-launcher --save-dev
plugins: [
require(
'karma-safari-launcher'
)
]
browsers: [
'Safari'
],
test.ts:测试入口文件,其中初始化了测试环境以及指定所有测试文件
在app目录下,还会找到一个名为app.component.spec.ts的文件,这就是一个Jasmine的测试,内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
上述代码使用了Jasmine的语法,关于Jasmine的更详细介绍,参见JavaScript 单元测试框架:Jasmine 初探。这里不赘述。
执行: ng test,就会看到上述文件的测试报告:
另外在测试报告中还可单击某个测试单独执行,报告如下:
填坑
对于Pipe、Service、Router等组件的测试,可参见Angular文档,这里重点讲述下在测试中遇到的各种坑。
No provider ***
测试时,如果被测组件需要其他第三方组件、servcie或pipe,没有被引入,就会出现No provider 的错误,解决方法很简单,在beforeEach中使用imports或provider引入即可:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
请求超时
在开发时,异步请求由于网络原因常会出现TimeOut的错误,通常的解决方法是设置TimeOut时间的上限,并对TimeOut错误作出人性化的提示。在测试时也同样会发生TimeOut的错误:
解决办法是可以在某个测试用例中设置TimeOut的时间:
相关阅读 >>
Angular和vue.js的区别是什么?Angular和vue.js的深度对比
浅谈Angular中的模块(ngmodule),延迟加载模块
更多相关阅读请进入《Angular》频道 >>

Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者