九、单元测试

可读性：★★★★✰ 理解难度：★★★✰✰

概述

本文主要介绍如何使用起来，不涉及具体测试用例细节。

关于：

前端测试是什么？
为什么需要单元测试？
如何写好单元测试？

下面这篇文章有比较简练的介绍：

浅谈前端单元测试

一、利用vue-cli生成测试框架

利用vue的生态，在通过脚手架生成项目时，勾选需要测试用例的选项，如下：

Vue CLI v4.5.12
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.12 → 4.5.13   │
│     Run npm i -g @vue/cli to update!      │
│                                           │
└───────────────────────────────────────────┘

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
> Manually select features

? Please pick a preset: Manually select features
? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
>(*) Unit Testing
 ( ) E2E Testing

生成项目后，可以看到根目录下会出现一个tests的文件夹，里面有一个example.spec.js。

控制台运行命令npm run test:unit，它会扫描tests文件夹下所有.spec.js后缀的文件并执行它，随后可以看到测试用例运行情况：

 [=========================] 100% (completed)

 WEBPACK  Compiled successfully in 1273ms

 MOCHA  Testing...



  HelloWorld.vue
    √ renders props.msg when passed 


  1 passing (36ms)

 MOCHA  Tests completed successfully

在tests文件夹下增加模块和xxx.spec.js文件，即可开始编写测试用例。

二、工具库测试

在写一些js工具库时，就比较需要测试，否则你没有途径可以验证函数的正确性，除非你想用满屏的console.log，比较成熟的工具库，比如lodash就编写了完整的单元测试。

1. 生成工具包的基本项目结构，这里测试框架选择`mocha`

利用rollup进行打包、babel实现语法兼容、引入mocha测试库。

"devDependencies": {
        "@babel/core": "^7.15.0",
        "@babel/preset-env": "^7.15.0",
        "@rollup/plugin-babel": "^5.3.0",
        "mocha": "^9.0.3",
        "rollup": "^v2.56.2",
        "rollup-plugin-commonjs": "^10.1.0",
        "rollup-plugin-node-resolve": "^5.2.0",
        "rollup-plugin-terser": "^7.0.2"
},

2. 新增单元测试文件

3. 编写测试用例

var assert = require('assert')
var witools = require('../../dist/witools.min')

describe('parser', function () {
    describe('desensitization', function () {
        it('should be 100****5346 when mobile is 10085065346', function () {
            const result = witools.parser.desensitization('10085065346', 'mobile')
            assert.strictEqual(result, '100****5346')
        })

        it('输入空的情况，返回原值', function () {
            const result = witools.parser.desensitization(null, 'mobile')
            assert.strictEqual(result, null)
        })
    })
})

4. 增加运行测试脚本

"scripts": {
        "test": "npm run build && mocha tests/**/*.spec.js",
        "build": "rollup --config rollup.config.js"
},

5. npm run test

三、总结

一般的团队在前端项目开发时，其实比较少写测试用例，但是如果它可以保证我们项目的稳定性，并且编写测试用例的时间小于后期修改问题的时间，能够增加我们的投入产出，还是可以去做的。

本文参考《代码整洁之道》（Robert C. Martin著，韩磊译）。

浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端，欢迎来撩，有意向可发送简历到chen_zhen@dahuatech.com，长期有效

上一篇：八、边界

下一篇：十、类