前言

自从小程序的定制组件和npm功能出现后，组件化和开源的思想逐渐开始萌芽。我们可以将一些常见的组件，比如自定义导航栏，打包成一个自定义组件，然后通过npm平台打开给其他开发人员，这样可以节省很多人工。我相信所有的开发人员都应该或多或少有使用开源包的经验，但是在使用之前，这个开源包必须赢得我们的信任。一个非常重要的指标就是单元测试通过率和覆盖率。

但是由于小程序独特的运行环境和不完整的开源基础模型，对小程序的定制组件进行单元测试有些困难。目前无论是vue还是react，这些组件化的框架都有一套完善的单元测试解决方案，但是小程序的定制组件很少，于是这个工具集——miniprogram-simulate应运而生。

痛点

闲话不多，先来看看小程序的运行机制：

可以看出，applet的定制组件是渲染和逻辑的分离，因此很难在逻辑层得到渲染结果，然后进行比较和测试。目前小程序的环境还没有开放，完全构建和模拟小程序的运行环境是不科学的。另外，我们只需要对小程序的自定义组件做单元测试，可以忽略小程序中很多与非自定义组件相关的功能，性能也没有那么苛刻，所以一个思路就是调整底层的操作机制，将两个线程合并为一个线程，将wxml和wxss的解析器改为纯js实现。

实现

仅仅有想法是不够的。在实现的过程中还有一些障碍。比如如何更好的模拟小程序自定义组件的各种特性和功能？自我实现并非不可能，但问题在于维护成本。如果applet定制组件实现了一个功能，那么测试工具需要更新。此外，如果在实现上有细微的差距，那么在小程序方面的一个小调整可能是对测试工具的一个骨断转型。因此，小程序定制组件的核心模块—— exparser是直接从基础库中提取的。

Exparser是定制组件系统的内核，是一个完整的、独立的模块，独立于基础库中的其他模块。它与小程序的api和运行机制系统完全分离，因此单线程和多线程机制都可以使用。Exparser提供了定制组件系统的最低接口，测试工具将其封装到定制组件测试环境中。如果基本库更新了自定义组件，如果是底层转换，可以直接更新exparser模块。如果只是外层改造，基本上就是对暴露界面层次的调整，不需要做太多的调整。

PS:目前虽然exparser已经发布到npm，但还是混淆了压缩代码，属于半开源状态，不建议开发者直接使用。

使用

mini program-simulate原本是自定义组件支架的miniprogram-custom-component的一部分，现在分开了，方便开发者做更多的使用选择(支架默认使用jest，其他自己想用的测试框架可以直接使用这个工具集，比如mocha等。).

以下只是对用法的简单介绍。首先，安装该工具集：

n install-save-dev迷你程序-模拟复制代码。那么这个工具集必须与其他测试框架和jsdom一起使用，比如jest。因为jest内置了jsdom，所以不需要额外安装jsdom。以下面的自定义组件为例：

！-自定义组件：comp . wxml-view class=' index“{ prop } }/view/*自定义组件：comp.wxss */。索引{ color3360green}//自定义组件comp . js component({ properties : { prop 3360 { type 3360 string，value3360' index.properties'}，}，})这是一个极其简单的自定义组件，然后我们就可以开始在comp.test.js中编写测试用例了

起步

加载和渲染自定义组是最基本的功能：

//自定义组件comp的测试用例：comp.test.jsconst

path = require('path')const simulate = require('miniprogram-simulate')test('comp', () => { const id = simulate.load(path.join(__dirname, './comp')) // 此处必须传入绝对路径 const comp = simulate.render(id) // 渲染成自定义组件树实例 const parent = document.createElement('parent-wrapper') // 创建父亲节点 comp.attach(parent) // attach 到父亲节点上，此时会触发自定义组件的 attached 钩子 expect(comp.querySelector('.index').dom.innerHTML).toBe('index.properties') // 测试渲染结果 // 执行其他的一些测试逻辑 comp.detach() // 将组件从父亲节点中移除，此时会触发自定义组件的 detached 生命周期})

获取数据

可以获取自定义组件的数据：

test('comp', () => {    // 前略    // 判断组件数据    expect(comp.data).toEqual({        a: 111,    })})

更新数据

可以更新自定义组件的数据：

test('comp', () => {    // 前略    // 更新组件数据    comp.setData({        a: 123,    })})

获取子组件

可以获取自定义组件的子组件：

test('comp', () => {    // 前略    const childComp = comp.querySelector('#child-id')    expect(childComp.dom.innerHTML).toBe('<div>child</div>')})

触发事件

可以模拟触发自定义组件的事件：

test('comp', () => {    // 前略    comp.dispatchEvent('touchstart') // 触发组件的 touchstart 事件    childComp.dispatchEvent('tap') // 触发子组件的 tap 事件})

至此，应该能大概了解到这个工具集的用途。这些只是简单的使用介绍，本文只是个引子，更多详细的用法请移步到github 仓库上查阅。

尾声

要想判断一个自定义组件的质量如何，其中最简单的方法就是看单元测试的表现，想要别人使用你的自定义组件，质量把关很重要，目前 miniprogram-simulate 已经实现了最基本的功能，其他功能也在尽力施工中，有什么好的建议或者使用上遇到什么问题也可以提issue。如果好评请 star 噢~