单元测试（即刻搞定！）前端javascript

文章图片

文章图片

文章图片

前言今天你胃口好吗？
如今随着一个项目业务不断壮大，重构与迭代也日趋频繁，为保证项目的稳定性与可维护性，单元测试也逐渐成为不可忽视的一环。本文将带来单元测试的介绍，有关框架选择，环境安装与书写测试用例等，内容较为简单，极易上手。
什么是单元测试

在计算机编程中，单元测试（Unit Testing）又称为模块测试，是针对程序模块（软件设计的最小单元）来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。在过程化编程中，一个单元就是单个程序、函数、过程等；对于面向对象编程，最小单元就是方法，包括基类（超类）、抽象类或者派生类（子类）中的方法。

以上是来自维基百科的解释。概括来说，单元测试是对软件中的最小可测试单元进行检查和验证。而对于 JavaScript 来说，通常也是针对函数、对象和模块的测试。
为什么要使用它优点

放心重构：重构某处业务代码过程中不用担心代码带来的副作用，用例会自动帮助全面测试;
利于维护：每次迭代新功能，代码更新频繁时，保证了测试的完整性（因为之前的测试用例依然存在），系统有很好的可维护性，便于多人开发;
快速熟悉代码：对团队的新人来说，单元测试其实是较好的文档，每个 case 都能详细地反映代码包含的具体功能和业务;
提高代码质量：假设一个单元测试写得逻辑非常复杂，或者说一个函数复杂到无法写单元测试，那就说明模块抽取有问题，可警示自己。

前端主流测试框架

框架名	简介与优点
Jest	Facebook 发布，API 简单，快出覆盖率统计结果，内置常用的测试工具，比如断言库，是集大成者，易上手
Mocha	诞生于 2011 年，社区活跃，灵活且扩展性好，但是需要额外配置（比如断言，需要自己学习和选择工具库）
Karma	2012 年 Google 团队开发，有个强大特性，可监测（Watch）文件的变化可自动执行，显示测试结果

断言概念：就是判断源码的实际执行结果与预期结果是否一致，若不一致即抛出异常。
知名团队使用 Jest 情况

团队	百瓶	推特	脸书	爱彼迎
Logo	文章图片	文章图片	文章图片	文章图片

前端如何选择合适的框架项目需求

与项目、编译器都需较好地兼容
测试快速执行
清晰的错误报告

成本

学习成本
调试维护成本

相比其他框架而言，Jest 比较新，本着对待技术需要有「喜新厌旧」的精神，另外结合自身需求，百瓶前端团队使用了 Jest，结合了 Vue Test Utils 组件测试框架。功能较齐全，简单易用。另外 Vue 官方网站对 Jest 的评价是：功能最全的测试运行器。
tips：如果写了 Mocha 的测试用例，但想迁移至 Jest 框架中，可使用 jest-codemods 进行无缝迁移。
撸起袖子，轻松上手 Talk is cheap，show you the code！即刻开始搭建环境。
存在一个脚手架生成的 Vue 项目（若还未生成 Vue 项目可在创建 Vue 项目时候选择手动配置内容，在手动配置中添加 Jest 测试框架与 Vue Test Utils 工具库）。
Jest安装
方法一：

首先安装 Jest，进入项目目录输入命令。

npm install --save-dev jest

安装 Jest 相关依赖。

npm install --save-dev jest babel-jest babel-core babel-preset-env regenerator-runtime

babel-jest、 babel-core、 regenerator-runtime、 babel-preset-env 安装目的是为使用 ES6 语法进行单元测试。因为 ES6 中 import 的使用在 Jest 并不支持。

添加 .bablerc 文件

{ "presets": [ [ "env", { "modules": false } ] ], "env": { "test": { "presets": [ "env" ] } } }

建立 jest.conf.js 文件，进行配置

module.exports = { moduleFileExtensions: [ 'js', 'json', 'vue', ], // 告诉 Jest 处理 `*.vue` 文件 moduleNameMapper: { // 支持源代码中相同的`@` => `src` 别名 '^@/(.*)$': '/src/$1', }, transform: { // 用 babel-jest 处理 js '^.+\\.js$': '/node_modules/babel-jest', // 用 vue-jest 处理 `*.vue` 文件 '.*\\.(vue)$': '/node_modules/vue-jest', } }