试着为vue项目添加单元测试（一）

简单的事情往往被忽略，说到单元测试，很多团队都只是在接口部分加入，UI层面最容易被忽略。今天我将围绕一个简单的demo写一下ui层面的单元测试。该文章仅仅面对没接触UI层面单元测试，且想快速上手的人，大佬可将鼠标移到右上角点击x即可。

👓 前端做单元测试(what? why?)

• 模拟用户操作，先于用户发现问题。

👇 需要提前了解什么知识？准备什么？

• 像char、mocha、jest这个库倒是可以简单了解一下
• 如果你想快速上手跟着我敲一遍代码也足够了
• 在接下来的测试中，vuecli已经提供了@vue/test-utils库
• 由于个人习惯，我另外安装了chai的断言库（ts项目需要另外安装@types/chai）

👏 先来看看我要测试的这个demo

非常简单，但是“基本能覆盖”一般ui层面的测试，考虑哪些会在我们测试范围内？

• 点击“打开嵌套表单的Dialog”按钮，弹窗是否能弹出
• 输入的值是否符合我们想要的类型（正常来说是在点击确定按钮之后去核验）
• 点击确定按钮和取消按钮是否能关闭弹窗

😾 通过代码来看看测试的细节

1. 需要测试的组件

// 需要测试的组件
<template>
  <div class="about">
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄