隨著小程式越來越被廣泛使用，我們前端的開發工作也從單純的web開發，擴大到web 小程式的跨端開發。為了提高研發效率，越來越多的web模組需要遷移、更新，相容於小程式以實現跨端復用。而這些模組也會跟著業務進行迭代和版本更新，這時候，我們就需要有良好的測試來保障各端模組的可靠性。
由於我們將許多已有的web模組遷移到小程序，web端的測試相對已經比較完備了。因此我們需要考慮的是：
如何快速的將已有的web用例遷移到小程式
針對新模組，如何快速撰寫兩端用例。
（我們在web端使用的主要是Puppeteer和Jest的搭配。）
可直接移步最終方案
我們目前的模組主要是以下三種：
類型1的模組由於不受環境限制，可與web共用單元測試，因此無需額外的測試案例開發。
類型3的模組，由於小程式與web端差異較大，比較難實現復用（目前我們的web UI層主要基於React，小程式使用原生開發，同時配合kbone進行部分頁面的同構開發）。
我們這裡主要針對類型2的模組進行測試案例的遷移。
小程式官方目前提供了兩種工具來支援小程式測試：
透過官方工具結合Jest, Mocha等測試框架，我們可以實現在小程式環境下的測試。
我們選擇了小程式自動化。類似於在Puppeteer運行web端的測試，我們可以透過小程式自動化，操控開發者工具，以實現小程式環境下的測試。兩者的相似之處為我們實現測試案例的跨端遷移甚至複用提供了可能性。
以遷移一個上報模組的測試案例為例，如下是我們已有的一個web上報模組測試用例。
該用例所覆寫的路徑為：呼叫imlog.default.error()方法-> 瀏覽器將發起請求-> 對請求參數進行校驗。
test('.error()调用正常', async done => { const opts = { project: 'imlogtest',
}; // 检查上报请求的参数
const expector = req => { try { const url = req.url(); const method = req.method(); const headers = req.headers(); const body = req.postData(); const data = JSON.parse(body);
expect(url).toBe(DEFAULT_URL); // 请求的url符合预期
expect(method).toBe('POST'); // 请求的method符合预期
expect(headers['content-type']).toBe('text/plain'); // 请求的contentType符合预期
expect(data.url).toBe(TEST_PAGE_URL); // 请求体的url字段符合预期
done();
} catch(error) {
done(error);
}
}; // 监听上报请求并校验参数
page.once('request', expector); // 在浏览器中执行上报
page.evaluate( (o) => { const reportor = window.imlog.default;
reportor.config(o);
reportor.error('test'); // 进行上报
},
opts
);
});复制代码以上主要用到了Puppeteer的Page API。
小程式自動化給我們提供了一些類似於puppeteer的API：
如果小程式能夠像Puppeteer，使用監聽事件的形式攔截到wx API的呼叫參數，測試案例編寫將會方便許多。我們想像的小程式用例將會是以下形式：
test('.error()调用正常', async done => { const opts = { project: 'imlogtest',
}; // 检查上报请求的参数
const expector = req => { try { // diff：按照特定格式解析出小程序请求参数
const {url, method, headers, body, data} = parseWxReqParams(req);
expect(url).toBe(DEFAULT_URL); // 请求的url符合预期
expect(method).toBe('POST'); // 请求的method符合预期
expect(headers['content-type']).toBe('text/plain'); // 请求的contentType符合预期
expect(data.url).toBe(TEST_PAGE_URL); // 请求体的url字段符合预期
done();
} catch(error) {
done(error);
}
}; // 监听上报请求并校验参数
// todo: miniProgram对象支持once/on等事件方法
miniProgram.once('request', expector); // 在小程序中执行上报
miniProgram.evaluate( (o) => { // diff: 请求方法挂在小程序app对象上
const reportor = getApp().imlog.default;
reportor.config(o);
reportor.error('test'); // 进行上报
},
opts
);
});复制代码只要我們尋找一種方式，透過事件的形式，以miniProgram.on('api', fn)的方式監聽到調用API時傳遞的參數。
在這種形式下，web和小程式用例的差異僅在於：
import { EventEmitter } from 'events';export default class MiniProgram extends EventEmitter { // ...}复制代码以上是小程式自動化測試的wx API攔截的詳細內容。更多資訊請關注PHP中文網其他相關文章！
