Unit tests

Unit testing is a topic that can never be avoided when writing high-quality custom components. A complete test case is a guarantee to improve the availability of custom components, and testing code coverage is an essential part. The gadget embraces open source from the base library version 2.2.1 and supports the installation of custom components with npm, which unit tests for custom components must also be supported.

Here's how to unit test custom components.

Test the framework

The popular test framework is now available as long as it takes into account both the nodejs side and the dom environment. B ecause we need to rely on some libraries of nodejs to refine the test environment, the dom environment is also necessary, because we need to build a complete dom tree structure to better simulate the operation of custom components. For example, you can choose a combination of mocha and jsdom, or you can use jest, as described in the following example as a test framework.

Custom component testing tools set

Small programs operate in a special environment, unlike the usual browser environment, which uses a two-threaded architecture. And when we do unit testing, we don't need to take the benefits of such a complex architecture, we do functional testing without having to demand performance, security, etc., so we provide a test tool set to support custom components that can run in nodejs single threads.

Let's first install the test tools set - 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;
}

We want to test the results of the rendering, and we can write the 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: Between wx objects and built-in components in the test tool set, doesn't really function, and if you need to test some special scenarios, you can overwrite the api interfaces and built-in components in the test tool set yourself. PS: At present, because some custom component features are still not supported (e.g. abstract nodes, etc.), the test tool can not fully overwrite the characteristics of the custom components, and will continue to improve.

The test tool set provides some test-easy interfaces, such as:

• Simulate touch events, custom event triggers
• Select the child nodes
• Update custom component data
• Trigger the lifecycle
• ...

More detailed usage can be found in the documentation on the github repository.