如何用 Karma，Jasmine，Webpack 测试 UI 组件系列（一）配置篇

如何用 Karma,Jasmine,Webpack 测试 UI 组件系列 （一） 配置篇为什么要测试

从个人经验来看，测试是防止软件缺陷的最好方法。

生产开发中当我们修改一小段代码，大部分的开发人员会手动打开他们的浏览器 或 POSTMAN来验证它是否仍然正确。

这种方法(手工测试)不仅低效，而且会隐藏一些你未发现的缺陷。

我们测试我们软件的目的是验证它是否如我们预期中的一毛一样。

单元测试

单元测试是一种测试你的项目中每个最小单元代码的有效手段，是使你的程序思路清晰的基础。

一旦所有的测试通过，这些零散的单元组合在一起也会运行的很好，因为这些单元的行为已经被独立的验证过了。

本文介绍如何使用 Karma,Jasmine,Webpack 编写单元测试代码。

详细代码请点击 https://github.com/sunyue1992/KaramJasmineWebpack

安装 Karma

下面给出一份karma.config.js的配置模板，大部分按照默认值配置就可以了。

Webpack 和 Babel 的安装和配置

Babel和Webpack的根据使用到的ECMAScript新特性决定是否配置，我的配置如下

Jasmine 的断言库的引入

编写测试用例

因为我司在生成中还在使用Angular 1.X 的版本，所以测试用例的编写也以此为例，需要安装angular angular-mocks。

参考

Testing AngularJS with Jasmine and Karma

(https://scotch.io/tutorials/testing-angularjs-with-jasmine-and-karma-part-1)

Angular 官方示例

(https://github.com/angular/angular-seed)

Angular 官方文档

(https://docs.angularjs.org/guide/unit-testing)

Jasmine语法

(http://keenwon.com/1218.html)

如果文章对你有帮助，欢迎关注，谢谢！