测试
测试是项目开发里一个非常重要的回归环节，完整的测试能为代码和业务提供保证，减少BUG的出现。
在前端框架的测试中可以分为3种类型，分别是单元测试、组件测试和端对端测试，这里我们主要讲解的是组件测试，组件测试某种意义上已经包含了单元测试在里面了，点击查看更多测试的介绍。
章节内容
- 安装依赖
- 新建测试文件
- 新增测试配置
安装依赖
Vue官方提供了测试框架 Vue Test Utils （简称VTU）来进行组件测试，下面在项目安装依赖
npm install --save-dev @vue/test-utils@next
VTU的主要作用是用来加载Vue的组件，但是没法用来解释（编译）组件，在webpack中有很多成熟的使用案例，但是我们使用的脚手架工具却是Vite，而Vite并没有提供官方的测试方案，不过没关系，Vite社区里提供很多的解决方案，比如我们接下来要用到的插件 vite-plugin-test，有兴趣的同学可以到Vite Issue中查看更多方案。
注意webpack解释vue组件主要采用vue-loader+babel，而vite内部是采用esbuild来解释js的，通过vite-plugin-test插件的源码可以很直观看到vite是如何解释vue组件，更多详细的实现原理可以查看vite源码。
安装插件
npm install --save-dev vite-plugin-test puppeteer
新建测试文件
默认测试的是根目录下的tests文件夹，下面来新建测试文件目录。
- ctcode-vue3
- // 其他目录 src public等等
- tests
- views
- login.spec.js
tests下包含了一个views文件夹，views下包含了一个login.spec.js文件，因为现在项目中只有一个首页组件和一个登录页组件，其中登录页组件实现了登录逻辑，所以采用登录页来作为测试组件，注意测试文件的后缀统一为spec.js。
src/tests/views/login.spec.js
//import flushPromises from 'flush-promises'
import {mount} from '@vue/test-utils'
// 导入登录页组件
import Login from '@/views/Login.vue'
// 导入store
import store from "@/store/index"
// 完整导入Antd组件库
import Antd from 'ant-design-vue';
describe('Login.spec.js', (done) => {
it('renders', async () => {
const wrapper = mount(Login, {
global: {
// 加载Vue的插件，因为项目里插件加载放在main.js中，测试文件需要单独在这里引入,相当于调用了app.use()
plugins: [store, Antd]
}
})
// 表单操作
const inputs = wrapper.findAll('input');
await inputs[0].setValue("admin");
await inputs[1].setValue("admin")
await wrapper.find('button').trigger('click');
// Wait until the DOM updates.
// await flushPromises()
// 异步请求接口和dom刷新的延时处理
setTimeout(() => {
const p = wrapper.find(".realname")
// 断言真实名字的dom是否有两个字符
expect(p.text().length).equal(2)
}, 1000)
})
})
上面的测试用例主要测试了登录业务是否成功，首先在表单的用户名和密码输入框中输入admin，然后触发点击提交按钮来提交表单，异步等待1秒后查看页面渲染结果是否正确，因为用户真名在mock中是随机生成的两个字符，所以使用字符串长度来进行判断。
由于之前登录页的代码并未包含用户真名的渲染，所以下面加上该功能来方便我们验证测试用例，
当然开发中应该是根据组件来编写测试，而不应该为了测试而改变组件，目前我们的项目业务并非完善的，所以先把重点放到如何编写测试上。
修改登录页src/views/login.vue
<template>
<div>
<h2>登录页 - by ctcode</h2>
<!-- 显示用户真名 -->
<p class="realname">{{store.state.user.info.realname}}</p>
<a-form layout="inline" :model="formData">
<a-form-item>
<a-input
v-model:value="formData.username"
placeholder="用户名"
/>
</a-form-item>
<a-form-item>
<a-input
v-model:value="formData.password"
type="password"
placeholder="密码" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" @click.prevent="onFinish(formData)"> 登录 </a-button>
</a-form-item>
</a-form>
</div>
</template>
<script>
import { reactive } from "vue";
import { useStore } from "vuex";
import { message } from "ant-design-vue";
export default {
setup() {
const store = useStore();
// 声明响应表单数据对象
const formData = reactive({
username: "",
password: "",
});
/**
* 请求登录函数
* @param {object} data
*/
async function onFinish(formData) {
const result = await store.dispatch("user/login", formData);
const { data, type } = result.data;
// 登录后结果处理，这里要根据后台接口实际的返回进行处理
if(type == "success") {
message.success(`登录成功：欢迎${data.user.realname}`)
} else {
message.error("登录失败！")
}
}
return {
formData,
onFinish,
store
};
}
};
</script>
上面代码主要添加了一个P标签来显示真名。
新增测试配置
新增vite测试配置，在根目录下新建vite.config.test.js
// 导入test插件
import viteTestPlugin from 'vite-plugin-test'
import viteConfigFn from "./vite.config"
export default (options) => {
const config = viteConfigFn(options);
config.plugins.push(
viteTestPlugin()
);
return config
}
添加测试脚本命令，在package.json的scripts下添加一项test命令
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "vite --config vite.config.test.js"
},
执行测试命令
npm run test
查看测试结果
显示结果测试通过，如果失败则是红色fail提示。
注意我们的测试用例包含了异步的请求，更多的异步解决方案可以查看官网。
查看代码：
git clone https://github.com/chitucode/ctcode-vue3.git (已下载可直接checkout)
git checkout v10.0
好友微信号
添加大佬微信 和上千同伴一起提升技术交流生活
hsian_
最后
码字不容易 你的点击关注点赞留言就是我最好的驱动力
