# Unit test

When writing high-quality custom components, unit tests are a constant topic. Perfect test cases are the guarantee to improve the usability of custom components, and the coverage of test code is also a necessary link. Mini Program from the base library version 2.2.1 Start embracing open source and supporting the use of npm To install a custom component, unit tests for the custom component must also be supported.

Here's how to unit test a custom component.

# Testing framework

The popular test framework on the market can be used as long as it can take into account Nodey End and dom Environment. Because we need to rely on Nodey Of some libraries to perfect the test environment and at the same time dom Environment is also a must because we need to build complete dom Tree structure, in order to better simulate the operation of custom components. For example, you can choose Mocha + jsdom Combinations can also be selected. Jest, the following example is chosen jest Illustrated as a testing framework.

# Custom Component Test Toolset

Mini Program run in a special environment, different from the common browser environment, it uses a double-threaded architecture. In unit testing, we do not need to use the benefits of such a complex architecture, we are doing functional testing without demanding performance, security, etc., so we provide a set of testing tools to support custom components in Nodey It can also be run in a single thread.

Let's install the test toolset[mini-program simulate ](https://github.com/WeChat mini-program /mini-program simulate )：

npm i --save-dev mini-program simulate 

# Writing Test Cases

Suppose 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 result of the rendering, and we can write the test case as follows:

// /test/components/index.test.js
const simulate = Require('miniprogram-simulate' )

test('components/index', () => {
    const id = simulate.load('/components/index') // The absolute path must be passed here
    const comp = simulate.render(id) // Rendering as a custom component tree instance

    const parent = document.createElement('parent-wrapper') // Creating a Father Node
    comp.attach(parent) // attach To the parent node, at which point the custom component's attached hook

    const view = comp.querySelector('.index') // Get subcomponents view
    expect(view.dom.innerHTML ).toBe('index.properties') // Test rendering results
    expect(window.getComputedStyle(view.dom).color).toBe('green' ) // Test rendering results
})

PS: Test tool set wx Objects and built-in components do not implement real functionality, and if you need to test some special scenarios, you can override the test toolset itself. api Interfaces and built-in components.

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 toolset provides interfaces for easy testing, such as:

• simulation touch Events, custom event triggers
• Select child nodes
• Update custom component data
• Trigger Life Cycle
• ...

More detailed usage can be found in [github warehouse](https://github.com/WeChat mini-program /mini-program simulate )Documents on.