推荐几款项目中常用的前端单测工具-五八三

前端测试工具

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` 工具链总结

Node 环境下测试 : Jasmine + babel
模拟 JSDOM 测试 : Jasmine + JSDOM + babel
真实浏览器测试 : 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%如此），可以先使用单元测试模拟业务场景，避免先开发的功能

下一篇讲解在react项目中如何使用Jest+Enzyme组合，在项目中配置及使用

请前往：www.yuque.com/lufeilizhix…

能学到什么？

Jest怎么4行代码完成一个测试用例

Jest怎么让测试用例覆盖率100%

Jest怎么和react&es完美结合

Jest最锋利的功能 Mock ,Functions,expcet …

如果你的项目现在要求写单元测试，或者个人需要提升学习，请点赞关注，感谢

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

前端
# 前端 # 单元测试

推荐几款项目中常用的前端单测工具