单元测试（unittesting），是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元的含义，一般来说，要根据实际情况去判定其具体含义，如C语言中单元指一个函数，Java里单元指一个类，图形化的软件中可以指一个窗口或一个菜单等。总的来说，单元就是人为规定的最小的被测功能模块。单元测试是在软件开发过程中要进行的最低级别的测试活动，软件的独立单元将在与程序的其他部分相隔离的情况下进行测试。——来自百度百科
前端如何做单元测试
前端代码都运行在浏览器里，对于Javascript来讲，单测通常是针对函数、模块、对象进行测试。前端单测框架如QUnit、Sinon、Mocha等，也有如vue&react初始化工程自带的如e2e、unit、jest等，单测的执行环境可以是日常使用的浏览器ie、Chrome等，也可以是无界面浏览器比如PhantomJS、HeadlessChrome。
在前端的世界里，至少需要三类工具来进行单元测试：
测试管理工具
测试管理工具是用来组织和运行整个测试的工具，它能够将测试框架、断言库、测试浏览器、测试代码和被测试代码组织起来，并运行被测试代码进行测试。我们经常使用Karma。
测试框架
测是框架是单元测试的核心，它提供了单元测试所需的各种API，你可以使用它们来对你的代码进行单元测试。我们使用Mocha。
断言库
断言库提供了用于描述你的具体测试的API，有了它们你的测试代码便能简单直接，也更为语义化，理想状态下你甚至可以让非开发人员来撰写单元测试。我们使用sinon-chai。
可选工具包括：
测试浏览器
这个比较好理解，就是测试代码所执行的浏览器环境。我们使用PhantomJS或者HeadlessChrome
测试覆盖率统计工具
我们使用和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在vueinitwebpack的unittests选项中选择Yes，testrunner选择karmaandMocha，会在项目中默认安装karma，mocha，chai断言库等在内的所有依赖包，并自动生成test文件夹，以及unit单测所有文件，包括HelloWorld.spec.js测试用例、index.js文件、karma.conf.js配置文件。
1.2如果没有安装karma-cli，则先要全局安装karma-cli：npminstallkarma-cli-g
1.3安装chrome-luncher：npminstallkarma-chrome-launcher--save-dev；更改配置文件karma.conf.js配置文件，将运行浏览器改为Chrome
1.4在package.json文件中将scripts中的unit选项中的--single-run删除，以便可在karma中进行debug
1.5安装Vue.js官方的单元测试实用工具库：npminstall--save-devvue-test-utils
1.6运行：npmruntest，karma会开启chrome跑HelloWorld.spec.js测试用例代码
2.在现有项目（以personalofferpc端为例）中安装karma+mocha
由于我的项目搭建时已经安装了e2e及jest测试框架，这里需要加入karma+mocha，并将单元测试默认配置项设置为karma+mocha
2.1
如果没有安装karma-cli，则先要全局安装karma-cli：npminstallkarma-cli-g
2.2
安装mocha：npminstall--save-devmocha
安装karma:npminstallkarma--save-dev
安装chai断言库：npminstallchai
安装karma-sourcemap-loader：npminstallkarma-sourcemap-loader
安装karma-webpack:npminstallkarma-webpack
安装karma-macha：npminstallkarma-mocha
安装karma-coverage:npminstallkarma-coverage
安装sinon、karma-sinon-chai:npminstallkarma-sinon-chai;npminstallsinon
安装karma-sepc-reporter:npminstallkarma-spec-reporter
2.3
在build文件夹中添加webpack.test.conf.js配置文件
在test文件中复制mocha文件到test文件中，其中包括覆盖率文件，spec测试用例代码文件,index.js配置文件及karma.conf.js配置文件
2.5
安装chrome-luncher：npminstallkarma-chrome-launcher--save-dev；
2.6
安装Vue.js官方的单元测试实用工具库：npminstall--save-devvue-test-utils
2.7
将package.json文件中的test/unit设置为：karmastarttest/mocha/karma.conf.js--coverage
2.8
运行：npmruntest，karma会开启chrome跑测试用例代码，测试成功
以上就完成了vue项目的单测
前端单元测试在真实项目中的现状如何？
目前缺少单元测试在前端工程中的主要原因分析：
1：前端缺陷在功能测试中易于暴露（肉眼即可观察）；
2：开发人员不了解单元测试方法，缺少实践经验，对单元测试能带来的好处存在怀疑，同时也增加了开发工时及工作量。
效果和质量要求并行，真实情况下业务开发量已经把程序员大部分精力淘空
缺少单元测试在实际中带来的一些常见的问题
1：在项目初期开发时，由于没有单元测试，单个组件无法即时调试，必须等待页完成的模块代码完成才能调试；
2：在调试过程中，对于一些极限值必须要求服务来Mock或者增加侵入式的调试代码，我时常听到前一天接口调通了。后面又不通了，经过分析后端修改参数未通知到前端同学诸如此类的问题，增加了大量沟通成本，
这也在一定程度上影响了开发效率；
3：在需要重构旧项目代码时，更加依赖功能测试，需要浪费较多资源部署测试环境，有时由于牵涉的业务功能点过多，甚至导致开发人员不敢对老代码进行重构。
完善前端单元测试的优势？
为了进行Mock数据，通常我们在项目中添加mock数据，看似是增加一定成本，但要求开发人员对代码进行重构解耦，这在一定程度使的代码结构更加趋于合理；
单元测试同时也是一份很好的业务文档，每项测试的描述都可以体现业务逻辑。
单元测试可以确保在prd后产出时（我做过的，看过的；交付项目中80%如此），可以先使用单元测试模拟业务场景，避免先开发的功能。