前端测试工具
·Karma
· Mocha
· Jest
前端单元测试是什么?
单元测试（unit testing），是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义，一般来说，要根据实际情况去判定其具体含义，如 C 语言中单元指一个函数，Java 里单元指一个类，图形化的软件中可以指一个窗口或一个菜单等。总的来说，单元就是人为规定的最小的被测功能模块。单元测试是在软件开发过程中要进行的最低级别的测试活动，软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。——来自百度百科
前端如何做单元测试
前端代码都运行在浏览器里，对于 Javascript 来讲，单测通常是针对函数、模块、对象进行测试。前端单测框架如 QUnit、Sinon、Mocha 等，也有如vue &react 初始化工程自带的如e2e、unit、jest等，单测的执行环境可以是日常使用的浏览器 ie、Chrome 等，也可以是无界面浏览器比如 PhantomJS、Headless Chrome。
在前端的世界里，至少需要三类工具来进行单元测试：
测试管理工具
测试管理工具是用来组织和运行整个测试的工具，它能够将测试框架、断言库、测试浏览器、测试代码和被测试代码组织起来，并运行被测试代码进行测试。我们经常使用Karma。
测试框架
测是框架是单元测试的核心，它提供了单元测试所需的各种 API，你可以使用它们来对你的代码进行单元测试。我们使用Mocha。
断言库
断言库提供了用于描述你的具体测试的 API，有了它们你的测试代码便能简单直接，也更为语义化，理想状态下你甚至可以让非开发人员来撰写单元测试。我们使用sinon-chai。
可选工具包括：
测试浏览器
这个比较好理解，就是测试代码所执行的浏览器环境。我们使用 PhantomJS 或者Headless Chrome
测试覆盖率统计工具
我们使用和 Karma 配套的Karma-coverage
使用mocha+karma 工具链总结
·在 Node 环境下测试工具链可以为 : mocha + chai + babel
· 模拟浏览器环境可以为 : mocha + chai + babel + jsdom
· 在真实浏览器环境下测试工具链可以为 : karma + mocha + chai + webpack + babel
使用 Jasmine 工具链总结
1. Node 环境下测试 : Jasmine + babel
2. 模拟 JSDOM 测试 : Jasmine + JSDOM + babel
3. 真实浏览器测试 : Karma + Jasmine + webpack + babel
使用Jest 工具链总结
· Node 环境下测试 : Jest + babel
· JSDOM 测试 : Jest + babel
· 真实浏览器测试(不推荐)
· E2E 测试 : Jest + Puppeteer
本文主要讲解在Vue 工程的单元测试如何做?
区分在现有项目中安装karma和在新建项目安装karma，这里分别进行安装介绍
1.新建项目安装karma + mocha
1.1 在vue init webpack的unit tests选项中选择Yes，test runner选择karma and Mocha，会在项目中默认安装karma，mocha，chai断言库等在内的所有依赖包，并自动生成test文件夹，以及unit单测所有文件，包括HelloWorld.spec.js测试用例、index.js文件、karma.conf.js配置文件。
1.2 如果没有安装karma-cli，则先要全局安装karma-cli：npm install karma-cli -g
1.3 安装chrome-luncher：npm install karma-chrome-launcher --save-dev；更改配置文件karma.conf.js配置文件，将运行浏览器改为Chrome
1.4 在package.json文件中将scripts中的unit选项中的--single-run删除，以便可在karma中进行debug
1.5 安装Vue.js 官方的单元测试实用工具库：npm install --save-dev vue-test-utils
1.6 运行：npm run test ，karma会开启chrome跑HelloWorld.spec.js测试用例代码
2.在现有项目（以personal offer pc端为例）中安装karma + mocha
由于我的项目搭建时已经安装了e2e及jest测试框架，这里需要加入karma+mocha，并将单元测试默认配置项设置为karma+mocha
2.1
如果没有安装karma-cli，则先要全局安装karma-cli：npm install karma-cli -g
2.2
安装mocha：npm install --save-dev mocha
安装 karma: npm install karma --save-dev
安装 chai断言库：npm install chai
安装 karma-sourcemap-loader：npm install karma-sourcemap-loader
安装 karma-webpack: npm install karma-webpack
安装 karma-macha：npm install karma-mocha
安装 karma-coverage: npm install karma-coverage
安装 sinon、karma-sinon-chai: npm install karma-sinon-chai ; npm install sinon
安装 karma-sepc-reporter: npm install karma-spec-reporter
2.3
在build文件夹中添加webpack.test.conf.js配置文件
'use strict'
// This is the webpack config used for unit tests.
const utils = require('./utils')
const webpack = require('webpack')
const merge = require('webpack-merge')
const config =require('../config')
const baseWebpackConfig = require('./webpack.base.conf')
const webpackConfig = merge(baseWebpackConfig, {
// use inline sourcemap for karma-sourcemap-loader
module: {
rules: utils.styleLoaders()
},
devtool: config.dev.devtool,
resolveLoader: {
alias: {
// necessary to to make lang="scss" work in test when using vue-loader's ?inject option
// see discussion at https://github.com/vuejs/vue-loader/issues/724
'scss-loader': 'sass-loader'
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': require('../config/test.env')
})
]
})
// no need for app entry during tests
delete webpackConfig.entry
module.exports = webpackConfig
2.4
在test文件中复制mocha文件到test文件中，其中包括覆盖率文件，spec测试用例代码文件, index.js配置文件及karma.conf.js配置文件
2.5
安装chrome-luncher：npm install karma-chrome-launcher --save-dev；
2.6
安装Vue.js 官方的单元测试实用工具库：npm install --save-dev vue-test-utils
2.7
将package.json文件中的test/unit设置为：karma start test/mocha/karma.conf.js --coverage
2.8
运行：npm run test ，karma会开启chrome跑测试用例代码，测试成功
以上就完成了vue项目的单测
前端单元测试在真实项目中的现状如何？
目前缺少单元测试在前端工程中的主要原因分析：
1：前端缺陷在功能测试中易于暴露（肉眼即可观察）；
2：开发人员不了解单元测试方法，缺少实践经验，对单元测试能带来的好处存在怀疑，同时也增加了开发工时及工作量。
效果和质量要求并行，真实情况下业务开发量已经把程序员大部分精力淘空
缺少单元测试在实际中带来的一些常见的问题
1：在项目初期开发时，由于没有单元测试，单个组件无法即时调试，必须等待页完成的模块代码完成才能调试；
2：在调试过程中，对于一些极限值必须要求服务来 Mock 或者增加侵入式的调试代码，我时常听到前一天接口调通了。后面又不通了 ，经过分析后端修改参数未通知到前端同学诸如此类的问题，增加了大量沟通成本，
这也在一定程度上影响了开发效率；
3：在需要重构旧项目代码时，更加依赖功能测试，需要浪费较多资源部署测试环境，有时由于牵涉的业务功能点过多，甚至导致开发人员不敢对老代码进行重构。
完善前端单元测试的优势？
为了进行 Mock数据，通常我们在项目中添加mock数据，看似是增加一定成本，但要求开发人员对代码进行重构解耦，这在一定程度使的代码结构更加趋于合理；
单元测试可以给出每项测试的响应时间，合理划分的单元测试有助于定位代码的性能问题；
单元测试同时也是一份很好的业务文档，每项测试的描述都可以体现业务逻辑。
单元测试可以确保在prd后产出时（我做过的，看过的；交付项目中80%如此），可以先使用单元测试模拟业务场景，避免先开发的功能。
本文内容不用于商业目的，如涉及知识产权问题，请权利人联系51Testing小编(021-64471599-8017)，我们将立即处理
