9、单元测试

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

概述

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

关于：node

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

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

浅谈前端单元测试npm

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

利用vue的生态，在经过脚手架生成项目时，勾选须要测试用例的选项，以下：babel

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。markdown

控制台运行命令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文件，便可开始编写测试用例。函数

2、工具库测试

在写一些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

3、总结

通常的团队在前端项目开发时，其实比较少写测试用例，可是若是它能够保证咱们项目的稳定性，而且编写测试用例的时间小于后期修改问题的时间，可以增长咱们的投入产出，仍是能够去作的。

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

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

上一篇：8、边界

下一篇：10、类

概述