自动测试小程序的Wx API拦截

微信小程序开发教程专栏小程序自动测试的Wx API拦截。

随着小程序的应用越来越广泛，我们的前端开发已经从简单的web开发扩展到web+小程序的跨端开发。为了提高RD效率，越来越多的web模块需要进行迁移和更新，并兼容小程序实现跨端重用。而这些模块会跟随业务进行迭代和版本更新。这时候就需要好的测试来保证每个模块的可靠性。

因为我们已经把很多现有的web模块移植到小程序上了，所以web端的测试是比较完整的。所以我们需要考虑的是:

如何快速将现有的web用例迁移到小程序上？

如何快速写出新模块的两端用例？

(我们在web端主要用的是Puppeteer和Jest。)

最终方案可以直接搬。

测试模块的类型我们目前的模块主要有以下三种类型:

环境无关逻辑层模块、环境相关逻辑层模块和环境相关UI组件模块。类型1的模块可以与web共享单元测试，因为它不受环境的限制，不需要额外的测试用例开发。

3类模块，由于小程序和web区别大，复用难度大(目前我们的web UI层主要基于React，小程序是原生开发，部分页面与kbone同构开发)。

在这里，我们主要为类型2模块迁移测试用例。

小程序端测试工具选择小程序官方目前提供两种工具支持小程序测试:

单元测试提供了一套测试工具来支持定制组件在nodejs的单线程中运行。小程序自动化为开发者提供了一套通过外部脚本控制小程序的方案。通过将官方工具与Jest、Mocha等测试框架相结合，可以实现小程序环境下的测试。

我们选择了小程序自动化。类似于在Puppeteer中运行web端测试，我们可以通过applet自动化来控制开发者工具，实现applet环境下的测试。两者的相似性为我们提供了跨端迁移甚至测试用例重用的可能性。

如何迁移测试用例以迁移一个报表模块的测试用例为例。下面是一个web报告模块的现有测试用例。

Web测试用例这个用例覆盖的路径是:调用imlog.default.error()的方法->；浏览器将发起请求->:检查请求参数。

测试( # 39；。error()调用是正常的 # 39；，异步完成= gt{ const opts = { project: # 39；imlogtest # 39, };//检查参数const expector = req = >；{ try { const URL = req . URL()；const方法= req . method()；const headers = req . headers()；const body = req . postdata()；const data = JSON . parse(body)；期望(url)。toBe(DEFAULT _ URL)；//请求的url符合预期的expect(方法)。toBe( # 39；邮政 # 39；);//请求的方法符合预期(headers[ # 39；内容-类型 # 39；]).toBe( # 39；text/plain # 39；);//请求的contentType符合预期的Expect (data.url)。tobe(test _ page _ URL)；//请求体的url字段符合预期的done()；} catch(错误){ done(错误)；} };//监控报表请求并验证参数page . once( # 39；请求 # 39；，expector)；//执行报表page.evaluate在浏览器中((o)= >；{ const reportor = window . im log . default；reportor . config(o)；reportor . error( # 39；测试 # 39；);//report }，opts)；});木偶师的页面API主要用于复制上面的代码。

Page.evaluate控制页面执行一段逻辑(execute im log . default . error())page . once( # 39；请求 # 39；、expector)监控页面的请求并获取参数(检测是否发起请求并验证请求参数)小程序用例的想象。小程序自动化为我们提供了一些类似于木偶师的API:

miniProgram.evaluate控制applet将代码片段注入到AppService中，并返回执行结果。如果小程序能像木偶师一样以监控事件的形式截取wx API的调用参数，那么写测试用例就方便多了。我们想象的applet用例将采用以下形式:

测试( # 39；。error()调用是正常的 # 39；，异步完成= gt{ const opts = { project: # 39；imlogtest # 39, };//检查参数const expector = req = >；{try {// diff:按照特定格式解析applet请求参数const {URL，method，headers，body，data } = parsewxreqparams(req)；期望(url)。toBe(DEFAULT _ URL)；//请求的url符合预期的expect(方法)。toBe( # 39；邮政 # 39；);//请求的方法符合预期(headers[ # 39；内容-类型 # 39；]).toBe( # 39；text/plain # 39；);//请求的contentType符合预期的Expect (data.url)。tobe(test _ page _ URL)；//请求体的url字段符合预期的done()；} catch(错误){ done(错误)；} };//监控提交请求并验证参数。//TODO:mini program对象支持once/on、mini program . once( # 39；请求 # 39；，expector)；//执行报表mini program . evaluate((o)= >；{// diff:请求方法挂在applet app object constreport或= getapp()上。imlog.defaultreportor . config(o)；reportor . error( # 39；测试 # 39；);//report }，opts)；});只要我们找到一种方法，以事件的形式复制代码到mini program . on( # 39；api # 39，fn)来监听调用API时传递的参数。

在这种形式下，web和applet用例之间的区别仅在于:

中的网页对象的操作被转移到applet的miniProgram对象，以完成在web中的窗口下安装的方法。web在小程序中的app下挂载和小程序解析请求参数的方式是不一样的。wx API的拦截方法首先观察miniProgram对象。通过miniprogram-automator暴露的MiniProgram.d.ts可以发现，MiniProgram类本身是从EventEmitter继承而来的。

从 # 39；导入{ EventEmitter };事件 # 39；；导出默认类迷你程序扩展事件发射器{//...}复制代码。接下来，您需要找到一种方法，在调用api时触发迷你程序对象的emit方法。

有两个自动化的API可以帮助我们实现这一点。

MiniProgram.mockWxMethod允许我们在wx对象上覆盖指定方法的调用结果。

miniProgram.exposeFunction全局公开AppService中的方法，这样applet端就可以调用测试脚本中的方法。

此时，一个大胆的想法涌上心头。以上是wx API拦截小程序自动化测试的细节。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：自动测试小程序的Wx API拦截 https://zhujicankao.com/81760.html