第 12 课：引入单元测试

背景

长期以来，单元测试在前端开发的普及度并不高，大多数的前端工程师并没有注意和重视。但是随着前端应用的复杂化，以及模块之间高内聚低耦合的诉求，单元测试在前端应用中显得很有必要。良好的单元测试在保证工程的质量和可维护性的同时，还可以起到项目文档的作用。本文我们一起学习下如何在 Vue 的前端工程中进行单元测试。

读者在跟随本文进行代码实操之前，先将代码从 GitHub 上下载下来熟悉一下目录结构，以便更好理解本教程。

使用 karma 进行单元测试

前端单元测试框架有多种，比如开箱即用的 Jasmine，灵活成熟的 Mocha，简约高性能的 AVA。其中我们选用 Mocha 来编写测试用例、测试框架。由于 Mocha 本身不包括断言，我们使用 Chai 作为断言库。我们需要一款测试执行过程管理工具（Test Runner）来自动启动浏览器运行测试并生成测试报告，我们选择的工具是 Karma。

首先安装依赖的测试工具：

npm install --save-dev karma mocha karma-mocha karma-chrome-launcher karma-webpack karma-sourcemap-loader karma-spec-reporter

测试工具介绍：

• Karma 测试执行过程管理工具，简化开发者的配置，可以启动一个或多个浏览器进行测试并生成测试报告。
• Mocha 测试框架，用来编写我们的测试用例。
• karma-mocha 由于我们使用 Mocha 作为测试框