前端测试工具

　　· 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 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%如此），可以先使用单元测试模拟业务场景，避免先开发的功能。

作者：CodingDogY   

来源：http://www.51testing.com/html/96/n-7796796.html