Vue 测试流程及规范

481 阅读1分钟
  • 测试脚本都要放在 test/unit/specs/ 目录下
  • 脚本命名方式为 [组件名].spec.js
  • 测试脚本由多个 describe 组成,每个 describe 由多个 it 组成
  • 单元测试默认测试 src 目录下除了 main.js 之外的所有文件,可在 test/unit/index.js 文件中修改
  • 编写测试用例
    • 测试静态组件 组件的 props
    • 组件有异步操作,用 nextTick()
    • 组件有用户交互 有用户点击 / 有用户输入
    • 使用 VueComponent.$el 获取组件的 HTML
    • 使用 VueComponent.$el.textContent 获取 HTML 的内容

image.png

image.png

该测哪些方面:

  • 模块应被渲染的 DOM 树是否争取
  • 模块的属性传递是否正确(属性是方法则是否被正确调用,属性是布尔值或对象则是否被正确传递且达到预期目的)
  • 模块内的各个行为是否正确
  • 还可以测试各个 DOM 节点是否被应用预期的 class,且这些 class 是不是预期的样式

参考文章

前端单元测试框架(Karma/Mocha + Vue-Test-Utils + Chai)