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