使用miniprogram-simulate对微信小程序进行单元

课程原因，未接触过测试，就要对小程序测试，很简单的东西都折腾了一会儿，稍微做个记录

我采用的测试框架是Jest,所有我们先把Jest环境配置好（我已经默认你装好了npm)

Jest 环境安装

首先我们新建一个项目

npm init -y

这个时候你会发现目录下多了一个package.json,我们暂时不管它。

现在我们要安装与Jest相关的依赖

npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime

后面四个依赖的是让Jest支持es6

之后我们新建一个.babelrc文件并且进入，添加以下内容：

{
  "presets": ["env"]
}

之后我们打开package.json,将“test”修改成jest,这样一来我们就可以直接输入npm run test就可以进行测试了

"scripts": {
  "test": "jest"
}

测试第一个小程序组件

我们首先要安miniprogram-simulate：

npm i --save-dev miniprogram-simulate

创建一个文件夹components专门用来放组件，并且创建一个简单的组件，作为演示

<!-- /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;
}

然后我们在components下再创建一个文件index.test.js，并输入以下内容

/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') // 创建父亲节点
 comp.attach(parent) // attach 到父亲节点上，此时会触发自定义组件的 attached 钩子
​
 const view = comp.querySelector('.index') // 获取子组件 view
 expect(view.dom.innerHTML).toBe('index.properties') // 测试渲染结果
 expect(window.getComputedStyle(view.dom).color).toBe('green') // 测试渲染结果
})

细心的同学发现了 测试文件名 = 被测文件名.test，是的，就是这样的。

之后我们就可以在控制台输入npm run test就有结果输出啦：

1559467572278.png

参考资料

Jest环境参考了这篇文章 https://www.jianshu.com/p/70a4f026a0f1

演示程序就是小程序单元测试的demo https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/unit-test.html