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、類

概述