建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
單元測(cè)試
在編寫(xiě)高質(zhì)量的自定義組件過(guò)程中，單元測(cè)試是永遠(yuǎn)避不開(kāi)的一個(gè)話(huà)題。完善的測(cè)試用例是提高自定義組件可用性的保證，同時(shí)測(cè)試代碼覆蓋率也是必不可少的一個(gè)環(huán)節(jié)。小程序從基礎(chǔ)庫(kù)版本 2.2.1 開(kāi)始擁抱開(kāi)源，支持使用 npm 安裝自定義組件，那針對(duì)自定義組件的單元測(cè)試也是必須支持的。
站在用戶(hù)的角度思考問(wèn)題，與客戶(hù)深入溝通，找到南宮網(wǎng)站設(shè)計(jì)與南宮網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶(hù)體驗(yàn)好的作品，建站類(lèi)型包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋南宮地區(qū)。
以下就來(lái)介紹如何對(duì)自定義組件進(jìn)行單元測(cè)試。
測(cè)試框架
現(xiàn)在市面上流行的測(cè)試框架均可使用，只要它能兼顧 nodejs 端和 dom 環(huán)境。因?yàn)槲覀冃枰蕾?lài)到 nodejs 的一些庫(kù)來(lái)完善測(cè)試環(huán)境，同時(shí) dom 環(huán)境也是必須的，因?yàn)槲覀冃枰ǔ赏暾?dom 樹(shù)結(jié)構(gòu)，才能更好的模擬自定義組件的運(yùn)行。例如可以選用 mocha + jsdom 的組合，亦可選用 jest，下述例子選用 jest 作為測(cè)試框架來(lái)說(shuō)明。
自定義組件測(cè)試工具集
小程序的運(yùn)行環(huán)境比較特殊，不同于常見(jiàn)的瀏覽器環(huán)境，它采用的是雙線(xiàn)程的架構(gòu)。而在進(jìn)行單元測(cè)試時(shí)，我們并不需要用到這樣復(fù)雜的架構(gòu)帶來(lái)的利好，我們進(jìn)行的是功能測(cè)試而無(wú)需苛求性能、安全等因素，因此我們提供了一個(gè)測(cè)試工具集以支持自定義組件在 nodejs 單線(xiàn)程中也能運(yùn)行起來(lái)。
我們先安裝一下測(cè)試工具集——miniprogram-simulate：
npm i --save-dev miniprogram-simulate
編寫(xiě)測(cè)試用例
假設(shè)我們有如下自定義組件：
{{prop}}
// /components/index.js
Component({
properties: {
prop: {
type: String,
value: 'index.properties'
},
},
})
/* /components/index.wxss */
.index {
color: green;
}
我們想要測(cè)試渲染的結(jié)果，可以按照如下方式編寫(xiě)測(cè)試用例：
// /test/components/index.test.js
const simulate = require('miniprogram-simulate')
test('components/index', () => {
const id = simulate.load('/components/index') // 此處必須傳入絕對(duì)路徑
const comp = simulate.render(id) // 渲染成自定義組件樹(shù)實(shí)例
const parent = document.createElement('parent-wrapper') // 創(chuàng)建父親節(jié)點(diǎn)
comp.attach(parent) // attach 到父親節(jié)點(diǎn)上，此時(shí)會(huì)觸發(fā)自定義組件的 attached 鉤子
const view = comp.querySelector('.index') // 獲取子組件 view
expect(view.dom.innerHTML).toBe('index.properties') // 測(cè)試渲染結(jié)果
expect(window.getComputedStyle(view.dom).color).toBe('green') // 測(cè)試渲染結(jié)果
})
PS：測(cè)試工具集中的 wx 對(duì)象和內(nèi)置組件都不會(huì)實(shí)現(xiàn)真正的功能，如果需要測(cè)試一些特殊場(chǎng)景的話(huà)，可以自行覆蓋掉測(cè)試工具集中的 api 接口和內(nèi)置組件。PS：目前因?yàn)橛胁糠肿远x組件功能仍未支持（如抽象節(jié)點(diǎn)等），故測(cè)試工具暫無(wú)法全部覆蓋自定義組件的特性，后續(xù)會(huì)繼續(xù)完善。
測(cè)試工具集中提供了一些方便測(cè)試的接口，比如：
- 模擬 touch 事件、自定義事件觸發(fā)
- 選取子節(jié)點(diǎn)
- 更新自定義組件數(shù)據(jù)
- 觸發(fā)生命周期
- ...
更多詳細(xì)的用法可以參閱 github 倉(cāng)庫(kù)上的文檔。
新聞標(biāo)題：創(chuàng)新互聯(lián)小程序教程：微信小程序單元測(cè)試
鏈接URL：http://www.dlmjj.cn/article/cdcdehp.html
