九、单元测试

·  阅读 140
九、单元测试

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

概述

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

关于:

  1. 前端测试是什么?
  2. 为什么需要单元测试?
  3. 如何写好单元测试?

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

浅谈前端单元测试

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

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

Vue CLI v4.5.12
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.124.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

pro1.png

利用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. 新增单元测试文件

pro2.png

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,长期有效

上一篇:八、边界

下一篇:十、类

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改