# Unit Testing

Unit testing is indispensable when you program high-quality custom components. Comprehensive test cases help ensure the availability of custom components, while the code coverage for testing is also an essential part. From base library 2.2.1 and later, Mini Programs embrace open source tools, allowing you to use npm to install custom components. Therefore, it is also necessary to support unit testing for custom components.

Now, let's see how to perform unit testing on custom components.

# Test Framework

All mainstream test frameworks are supported as long as they are compatible with Node.js terminals and DOM environments. As you must rely on Node.js libraries to optimize the test environment, a DOM environment is also required. Therefore, you must build a complete DOM tree structure to better simulate the operation of custom components. For example, you can use the combination of Mocha and JSDOM or you can select Jest. In the example below, we use Jest as the testing framework.

# Testing Toolkit for Custom Components

The Mini Program runtime environment is unique. Unlike a common browser environment, it adopts a dual-thread architecture. However, when performing unit testing, you do not need to use such a complex architecture. As you simply want to test the functionality without having to consider the performance and security, you can use our testing toolkit to run custom components in a Node.js single-thread environment.

First, install the testing toolkit - miniprogram-simulate:

npm i --save-dev miniprogram-simulate

# Writing Test Case

Assume you have the following custom component:

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

To test the rending results, you can write a test case as shown below:

// /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
    const comp = simulate.render(id) // Render as a custom component tree index

    const parent = document.createElement('parent-wrapper') // Create a parent node
    comp.attach(parent) // Attach to the parent node, which triggers an attached hook of the custom component

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

Note: In the testing toolkit, the wx objects and built-in components cannot implement their true features. To test special scenarios, you can independently overwrite APIs and built-in components in the test toolkit.

Notes: Since some custom component features (such as abstract nodes) are not supported, the test toolkit cannot fully cover all custom component features. We are working on this now.

The test toolkit provides some convenient testing APIs, allowing you to:

• Simulate the triggering of touch events and custom events
• Select child nodes
• Update custom component data
• Trigger lifecycles
• ...

For more usage information, see documentation in the GitHub repository.