Skip to content

Latest commit

 

History

History
202 lines (151 loc) · 5.85 KB

tutorial.md

File metadata and controls

202 lines (151 loc) · 5.85 KB
Raw

框架选择

可搭配大部分流行框架使用，只要其满足 js 运行环境和 dom 环境即可。以下简单介绍下 jest 和 karma：

jest

  1. 安装 jest 和配置参考 jest 官网
  2. 配置 jest 
    {
    // jest 是直接在 nodejs 环境进行测试，使用 jsdom 进行 dom 环境的模拟。在使用时需要将 jest 的 `testEnvironment` 配置为 `jsdom`。
    // jest 内置 jsdom，所以不需要额外引入。
    "testEnvironment": "jsdom",
    // 配置 jest-snapshot-plugin 从而在使用 jest 的 snapshot 功能时获得更加适合肉眼阅读的结构
    "snapshotSerializers": ["miniprogram-simulate/jest-snapshot-plugin"]
}

具体的 jest 配置例子可参考 weui-miniprogram 中的配置

karma

karma 可使用浏览器真实环境来运行测试用例，但是因为小程序自定义组件的文件是割裂的，而浏览器环境没有文件系统支持，因此需要做一些特殊处理。

安装 preprocessor：

npm install --save-dev karma-dirname-preprocessor karma-filemap-preprocessor karma-webpack

配置 karma.conf.js 中的 basePath、files、preprocessors、webpack 字段：

module.exports = function(config) {
    config.set({
        // 其他配置 ......
        basePath: path.resolve(__dirname, './test'), // 被测试组件所在根目录，因为编译器的限制，要求所有被测组件必须在此目录下
        files: [
            'node_modules/miniprogram-simulate/build.js', // 注入 miniprogram-simulate，会在 window 下挂载 simulate 对象
            'test/spec/*.spec.js', // 测试用例
            'src/component/*', // 组件文件，路径尽量不要包含 ../ 或者 ./，不然 wcc 编译器可能识别不了
        ],
        preprocessors: {
            'src/component/*': ['filemap'], // 组件文件使用 filemap 将各个文件内容注入到浏览器，路径尽量不要包含 ../ 或者 ./，不然 wcc 编译器可能识别不了
            'test/spec/*.spec.js': ['webpack', 'dirname'], // 使用 webpack 进行打包，使用 dirname 处理测试用例中的 __dirname 变量
        },
        webpack: {
            optimization: {
                minimize: false, // 不做压缩，方便调试
            },
            node: {
                __dirname: false, // 不注入 __dirname，由 preprocessor 来处理
            },
        },
        // 其他配置 ......
    })
}

然后测试用例如下方式来编写（以使用 mocha + chai 的方式为例）：

const path = require('path')
const expect = require('chai').expect

describe('component', () => {
    it ('should run successfully', () => {
        // 此处直接使用 simulate 或者 window.simulate 即可，不需要再做 require

        const id = simulate.load(path.resolve(__dirname, '../src/component/index'))
        const comp = simulate.render(id, {prop: 'index.test.properties'})

        comp.attach(document.body) // 挂载在 body 下面

        expect(simulate.match(comp.dom, '<wx-view class="main--index">index.test.properties</wx-view>')).to.equal(true)
    })
})

PS：在使用 karma 测试时只支持官方编译器编译 wxml 文件，不支持使用 js 模拟的编译器，因此就算在 simulate.load 方法中配置了 compiler: 'simulate' 也不会生效。

使用指南

以下均以 miniprogram-simulate + jest 的方式来介绍。

引入测试工具

const simulate = require('miniprogram-simulate')

起步例子

test('comp', () => {
    const id = simulate.load(path.join(__dirname, './comp')) // 加载自定义组件，返回组件 id
    const comp = simulate.render(id) // 使用 id 渲染自定义组件，返回组件封装实例

    const parent = document.createElement('parent-wrapper') // 创建容器节点
    comp.attach(parent) // 将组件插入到容器节点中，会触发 attached 生命周期

    expect(comp.dom.innerHTML).toBe('<div>123</div>') // 判断组件渲染结果
    // 执行其他的一些测试逻辑

    comp.detach() // 将组件从容器节点中移除，会触发 detached 生命周期
})

传入初始渲染 props

test('comp', () => {
    // 前略

    const comp = simulate.render(id, {
        propName: 'propValue',
    })
})

获取数据

test('comp', () => {
    // 前略

    // 判断组件数据
    expect(comp.data).toEqual({
        a: 111,
    })
})

更新数据

test('comp', () => {
    // 前略

    // 更新组件数据
    comp.setData({
        a: 123,
    })
})

获取子组件

test('comp', () => {
    // 前略

    const childComp = comp.querySelector('#child-id')
    expect(childComp.dom.innerHTML).toBe('<div>child</div>')
})

获取子组件列表

test('comp', () => {
    // 前略

    const childrenComp = comp.querySelectorAll('.child-item')
    expect(childrenComp.length).toBe(3)
})

触发事件

test('comp', () => {
    // 前略

    comp.dispatchEvent('touchstart') // 触发组件的 touchstart 事件
    childComp.dispatchEvent('tap') // 触发子组件的 tap 事件
})

触发生命周期

test('comp', () => {
    // 前略

    comp.triggerLifeTime('ready') // 触发组件的 ready 生命周期
    childComp.triggerLifeTime('moved') // 触发子组件的 moved 生命周期
})

获取组件 this

test('comp', () => {
    // 前略

    const that = comp.instance // 注意，此处并不是返回 comp，comp 是在组件实例上再封装了一层的对象，而这里返回的是组件实例，即组件方法定义里的 this

    that.data // 获取组件的 data 对象，这里和 comp.data 拿到的对象是一样的
    that.xxx() // 调用组件 methods 定义段里定义的方法
})