# Unit test

When writing high-quality custom components, unit tests are a constant topic. Sound test cases are a guarantee for improving the usability of custom components, and testing code coverage is an essential part.Weixin Mini Program Open source is embraced by the base library version {% version ('2.2.1')%}, which allows npm to be used to install custom components. Unit tests for custom components are mandatory.

Here's how to unit test a custom component.

# Test framework

The most popular testing frameworks available today can be used, as long as they can accommodate both the nodejs side and the dom environment. Because we rely on some of the nodejs libraries to improve the test case, the dom is also necessary, because we have to build the full dom tree structure to better simulate the operation of custom components. For example, you can choose a combination of mocha + jsdom, you can also choose jest, the following example uses jest as a test framework to illustrate.

# Custom component testing tool set

Weixin Mini Program runs in a special environment, which is different from the common browser environment.In unit tests, we do not need to use the benefits of such a complex architecture. We are doing functional tests without demanding performance, security, etc. So we provide a set of test tools to support custom components running in a single thread of nodejs.

Let's first install the test toolset - miniprogram-simulate :

npm i --save-dev miniprogram-simulate

# Write test cases

Let's say we have the following custom 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;
}

If we want to test the results of the rendering, we can write test cases as follows:

// /test/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') // 测试渲染结果
})

PS: Neither the wx objects nor the built-in components in the test tool set implement real functionality, and if you need to test some special scenarios, you can cover up the API interfaces and built-ins in the test tools yourself.

PS: At present, some custom component functions are not supported (such as abstract nodes, etc.), so the test tool can not fully cover the features of custom components, and will continue to improve.

The Test Tool Center provides some interfaces for easy testing, such as:

• Simulate touch event, custom event trigger
• Select a subnode
• Update custom component data
• Trigger life cycle
• ...

For more detailed usage, see the documentation on github repository .