MyElement Docs

编写测试 ​

文件以 xxx-test.(js|ts)x? 的格式

基于 Vue 的测试工具 ​

vue-test-utils ​

  • 挂载 mount
    • 修改vitest配置，支持DOM
    • environment: 'jsdom'
  • query
    • find() / get()
    • findAll()
    • findComponent()
  • 内容 / 属性
    • text()
    • html()
    • classes()
    • attributes()
  • stub 模拟子组件

VNode相关 ​

在测试一些带有 slots 的组件时需要用到 https://cn.vuejs.org/guide/extras/rendering-mechanism.html

Virtual DOM 是一种虚拟的，保存在内存中的数据结构，代表 UI 表现，和真实 DOM 节点保持同步。

Render pipeline ​

  • compile Vue 组件的 template 会被编译成 render function, 一个可以返回 VDOM 树的函数
  • Mount 执行 render function 遍历虚拟 DOM 树，生成真正的 DOM 节点
  • Patch 当组件中任何响应式对象依赖发生变化时，执行更新操作。生成新的虚拟节点树。Vue 内部会遍历新的虚拟节点树，和旧树做对比，然后执行必要的更新操作

优点：

  • 可以使用一种更方便的方式，不必修改真实的 DOM
  • 更新效率更高，计算需要最小化操作，并完成更新

创建 VNode ​

https://cn.vuejs.org/guide/extras/render-function.html

h 和 createVnode 都可以创建 vnode, h 是 hyperscript 的缩写（意为 JavaScript that produces HTML），很多 VDOM 的实现都使用这个函数名称。还有个就是 createVnode，名称更形象，两者用法是一样的

js
import { h, createVnode } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    // children
  ]
)

运用vitest提供的钩子函数增加效率 ​

  • beforeAll 所有测试用例开始前的钩子
  • beforeEach 每个测试用例开始之前的钩子
  • afterAll 所有测试用例执行完后
  • afterEach 每个测试用例执行完后

可配合 test.skip test.only 等修饰符

测试Vue表单 ​

js
test('modelValue should be updated', async () => {
  const wrapper = mount(Editor, {
    props: {
      modelValue: 'initialText',
      'onUpdate:modelValue': (e ) => wrapper.setProps({
        modelValue: e
      })
    }
  })

  await wrapper.find('input').setValue('test')
  expect(wrapper.props('modelValue')).toBe('test')
})