微信小程序: 组件测试

准备工作

• 在package.json里指定jest的运行环境为jsdom 和 安装依赖包

"jest": { "testEnvironment": "jsdom" }

"dependencies": {
    "@vant/weapp": "^1.10.16",
    "csso": "^3.5.1",
    "j-component": "^1.4.9",
    "less": "^3.10.3",
    "miniprogram-compiler": "latest",
    "postcss": "^7.0.23"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "@types/jest": "^29.5.1",
    "axios": "^1.4.0",
    "cross-env": "^7.0.3",
    "jest": "^26.0.1",
    "miniprogram-simulate": "^1.5.9",
    "msw": "^1.2.1",
    "pretty-format": "^26.0.1"
  }

被测试组件a

# components/a/index.wxml

{{title}}

  

# components/a/index.json

{
  "component": true,
  "usingComponents": {
    "a1": "./components/a1"
  }
}

# components/a/index.wxss

.title {
  color: red;
}

测试文件test/components/a.spec.js

const path = require('path');

describe('[wx-component] 组件测试', () => {
  const definition = {
    componentPath: path.resolve(__dirname, '../../components/a/index'),
    tagName: "a",
    options: {
      // classPrefix: 'xxx'
    }
  }

  const simulate = require('miniprogram-simulate'); // 引入测试工具
  const id = simulate.load(definition.componentPath, definition.tagName, definition.options); // 加载自定义组件，返回组件 id
  // console.log('simulate = ', simulate, ', id = ', id)
  const comp = simulate.render(id, { propName: 'propValue' }); // 使用 id 渲染自定义组件，返回组件封装实例

  // 注: 创建的组件必须放到一个容器内
  const parent = document.createElement('parent-wrapper'); // 创建容器节点
  comp.attach(parent); // 将组件插入到容器节点中，会触发 attached 生命周期

  const that = comp.instance // 获取组件 this

  test('a组件测试', () => {

    // 判断组件渲染结果
    expect(comp.dom.innerHTML).toBe('hello miniprograme simulate111222333444');

    // 判断组件数据
    expect(that.data).toEqual({ title: "hello miniprograme simulate", propValue: "123" });
    that.setData({ title: "hello wx", propValue: "456" }) // 更新组件数据
    expect(that.data.title).toEqual("hello wx"); // 判断组件数据
    expect(that.data.propValue).toEqual("456"); // 判断组件数据

    // querySelectorAll 获取符合给定匹配串的所有节点，返回 Component 实例列表

    // 判断组件style
    const view = comp.querySelectorAll('.title') // 获取子组件 view
    if (view && view.length > 0) {
      if (view[0].dom) {
        expect(window.getComputedStyle(view[0].dom).color).toBe('red');
        expect(view[0].dom.innerHTML).toBe("hello wx");
      }
    }
  });

  test('子组件 a1 测试', () => {
    // 获取子组件
    const childComp = comp.querySelector('#child-a1');
    const childrenComp = comp.querySelectorAll('.child-item');
    // childrenComp[0].instance.getRelationNodes('.item')

    // console.log('childrenComp[0] = ', childrenComp[0].instance.getRelationNodes('.item')); // .querySelectorAll('.item'))
    // console.log('comp.instance = ', comp.dom.children)

    expect(childComp.dom.innerHTML).toBe('111222333444');


    // expect(childrenComp.length).toBe(4);

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

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

});

运行脚本

yarn test:components

注: 子组件测试功能还在未做

注: package.json 和 jest.setup.js 这种jest配置文件修改后, 需要重启测试(命令) 才会生效, 不然会报一些无厘头的问题.