微信小程序 單元測試

單元測試

在編寫高質(zhì)量的自定義組件過程中，單元測試是永遠(yuǎn)避不開的一個話題。完善的測試用例是提高自定義組件可用性的保證，同時測試代碼覆蓋率也是必不可少的一個環(huán)節(jié)。小程序從基礎(chǔ)庫版本 2.2.1 開始擁抱開源，支持使用 npm 安裝自定義組件，那針對自定義組件的單元測試也是必須支持的。

以下就來介紹如何對自定義組件進(jìn)行單元測試。

測試框架

現(xiàn)在市面上流行的測試框架均可使用，只要它能兼顧 nodejs 端和 dom 環(huán)境。因?yàn)槲覀冃枰蕾嚨?nodejs 的一些庫來完善測試環(huán)境，同時 dom 環(huán)境也是必須的，因?yàn)槲覀冃枰ǔ赏暾?dom 樹結(jié)構(gòu)，才能更好的模擬自定義組件的運(yùn)行。例如可以選用 mocha + jsdom 的組合，亦可選用 jest，下述例子選用 jest 作為測試框架來說明。

自定義組件測試工具集

小程序的運(yùn)行環(huán)境比較特殊，不同于常見的瀏覽器環(huán)境，它采用的是雙線程的架構(gòu)。而在進(jìn)行單元測試時，我們并不需要用到這樣復(fù)雜的架構(gòu)帶來的利好，我們進(jìn)行的是功能測試而無需苛求性能、安全等因素，因此我們提供了一個測試工具集以支持自定義組件在 nodejs 單線程中也能運(yùn)行起來。

我們先安裝一下測試工具集——miniprogram-simulate：

npm i --save-dev miniprogram-simulate

編寫測試用例

假設(shè)我們有如下自定義組件：

<!-- /components/index.wmxl -->
<view class="index">{{prop}}</view>

// /components/index.js
Component({
  properties: {
    prop: {
      type: String,
      value: 'index.properties'
    },
  },
})

/* /components/index.wxss */
.index {
  color: green;
}

我們想要測試渲染的結(jié)果，可以按照如下方式編寫測試用例：

// /test/components/index.test.js
const simulate = require('miniprogram-simulate')

test('components/index', () => {
    const id = simulate.load('/components/index') // 此處必須傳入絕對路徑
    const comp = simulate.render(id) // 渲染成自定義組件樹實(shí)例

    const parent = document.createElement('parent-wrapper') // 創(chuàng)建父親節(jié)點(diǎn)
    comp.attach(parent) // attach 到父親節(jié)點(diǎn)上，此時會觸發(fā)自定義組件的 attached 鉤子

    const view = comp.querySelector('.index') // 獲取子組件 view
    expect(view.dom.innerHTML).toBe('index.properties') // 測試渲染結(jié)果
    expect(window.getComputedStyle(view.dom).color).toBe('green') // 測試渲染結(jié)果
})

PS：測試工具集中的 wx 對象和內(nèi)置組件都不會實(shí)現(xiàn)真正的功能，如果需要測試一些特殊場景的話，可以自行覆蓋掉測試工具集中的 api 接口和內(nèi)置組件。PS：目前因?yàn)橛胁糠肿远x組件功能仍未支持（如抽象節(jié)點(diǎn)等），故測試工具暫無法全部覆蓋自定義組件的特性，后續(xù)會繼續(xù)完善。

測試工具集中提供了一些方便測試的接口，比如：

• 模擬 touch 事件、自定義事件觸發(fā)
• 選取子節(jié)點(diǎn)
• 更新自定義組件數(shù)據(jù)
• 觸發(fā)生命周期
• ...

更多詳細(xì)的用法可以參閱 github 倉庫上的文檔。