认识前端工具链（三）之测试工具

前端工具链综述

工具链在前端领域扮演着很重要的角色。如何为Javascript生产环境构建去构建一套工具链，来覆盖前端各个开发环节，是我们需要了解学习的。而一套高效的工具链体系，对于每一个前端团队来说都有着至关重要的意义，它不仅可以提高团队的开发效率，还可以在一定程度上规范前端开发的各个环节，进而为团队节省一些人员协作和调整的成本。

综上，前端工具链旨在友好开发体验，提升开发团队开发效率。

而要构建一个工具链，首先我们先要了解在前端开发领域有哪几个环节：

• 项目初始化
• 开发、调试、构建
• 单元测试
• 发布

所以一个前端工具链，它大致都会包含上面这一系列功能。而一个典型的示例就类似于下面：

• Yeoman
• Webpack
• Mocha
• 发布系统

我们可以将进而将它总结成下面几块：

• 脚手架
• 构建⼯具
• 测试工具
• 发布系统

而上了规模的团队也都会针对以上的流程，制定一个工具链，并将它包装成一个黑盒形式，让程序员在每个环节只需要运行简单命令行，即可进入开发流程。

而从整体上了解工具链相关的知识体系，熟悉其大致结构以及运作方式，也是十分重要的。

所以，下面这里是本人将对于工具链相关基础知识的一些整理。这一篇我们首先来介绍的是，工具链中的测试工具。

工具链系列文章指路：

认识前端工具链（一）之脚手架

认识前端工具链（二）之构建工具

单元测试工具

测试工具是前端工具链里非常重要的一环，对于大部分的开源项目来说，测试都是一个必需品。如果我们某个项目是一个被高度复用的东西，那测试的收益也是很高的，所以除非是一次性使用的代码，我们还都是要使用单元测试 。

下面介绍一些当前最流行的测试工具和一些配套设施：

这里有流行的两个库一个是Mocha，一个是Jest

Mocha

Mocha最早是一个针对Node.js的一个测试框架，它默认在使用Webpoack之前，它都是不支持import export的，这里我们例子里使用的是require。

1. 安装

npm install -g mocha
npm install --save-dev mocha

2.基本使用

//test/test.js
var assert = require('assert');
var add = require('../add.js')

describe('add function testing', function () {
   
  it('1 + 2 shuold be 3', function() {
   
    assert.equal(add(1, 2), 3);
  });
  it('-5 + 2 shuold be -3', function() {
   
    assert.equal(add(-5, 2), -3);
  });
})

// add.js
function add (a, b) {
   
  return a + b
}
module.exports = add

3.引入babel

这里我们引入babel来解决一下add.js必须用node的方式module.exports的问题。而简单的方法，我们可以用webpack项目，然后在dist里面去做单元测试，但从理论上考虑，测试这个环节依赖于build这个环节，是一件不太好的做法。另外，这对后面做code coverage话以上面这种方式的话，会带来不必要的麻烦。

所以我们这里用babel给我们提供一个方案，去解决。

这个方案是babel register。

安装

npm install --save-dev @babel/core @babel/register
npm install --save-dev @babel/preset-env

然后配置一下babel。

命令

./node_moudules/.bin/mocha --require @babel/register

4. code coverage

code coverage表示我们的测试到底覆盖了源文件的哪些代码。这里我们介绍一个新的工具叫做nyc，它可以在一个复杂的文件中，测试它最终测试的覆盖比例。

• 安装

npm install --save-dev nyc

• 命令

nyc ./node_modules/.bin/mocha

这里我们加入babel使用：

• 安装两个插件

npm install --save-dev @istanbuljs/nys-config-babel
npm install --save-dev babel-plugin-istanbul

• 在package.json中添加两个script项

  "scripts": {
   
    "test": "mocha --require @babel/register",
    "coverage": "nyc mocha"
  },

• 我们写测试用例的时候用npm run coverage,写业务代码的时候用的是npm run test

对html-parser进行单元测试

这里要完成的是对我之前写一个html-parser添加单元测试。

这里将之前的代码拷贝，新建一个目录然后重复完成上述操作。

然后执行命令，将单元测试跑起来。

结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nadMxImP-1623671339940)(./img/img01.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NOpYzOST-1623671339944)(./img/img02.jpg)]

由上图可知，测试用例覆盖率是30%多，下面我们将通过修改用例实现90%以上覆盖。

// parser-test.js
var assert = require('assert');
import {
   parseHTML} from '../src/parser'

describe('parse html:', function () {
   
  it('<a></a>', function() {
   
    let tree = parseHTML('<a></a>')
    assert.equal(tree.children[0].tagName, 'a');
    as