1、为什么需要组件测试
测试可以提高代码质量，这是毋庸置疑的，但前端开发过程中，业务逻辑和样式常常需要调整，这样导致测试案例也需要调整，如果大范围的对前端的代码进行测试，投入和产出不成正比，这里我推荐可以进行小范围测试，比如对通用组件进行测试，理由有如下2点：
1、通用组件使用的范围广而修改的频率低，对其进行测试产出高；
2、对通用组件修改后，执行测试案例不通过，说明可能此次的修改没有兼容之前的组件功能，可以帮助开发者减少修改组件后产出的bug。
2、选择测试框架和工具
结合我自己的组件库项目，使用了vue-cli，我选用了vue官网推荐的Vue Test Utils测试库，添加 cli-plugin-unit-jest插件（作为我测试框架的测试运行器和断言库），选择这个测试框架理由如下：
1、Vue Test Utils提供的文档很细很全，api可以满足大部分使用场景，查找api很方便，上手很快。 相比于@testing-library测试工具，你需要配合其他断言库和测试运行器（Jest、Chai等）来完成测试；
2、方便扩展，Vue Test Utils提供了组件中vuex、vue router相关测试方案方便扩展。@testing-library官网文档说明里，没有这块相关的测试方案。
3、使用Vue Test Utils实战
3.1、安装依赖（推荐使用第二种方式）
方式一：
cnpm install --save-dev @vue/test-utils
vue add unit-jest // 安装cli-plugin-unit-jest，同时在scripts中生成test测试命令、测试案例demo、测试配置文件
说明：有时执行完上面2条命令后，执行测试案例报错，提示依赖包缺失，需要删除node_modules，重新安装一遍依赖。原因是“vue add unit-jest”该命令通过npm安装依赖包，安装比较慢。
方式二：
cnpm install --save-dev @vue/test-utils @vue/cli-plugin-unit-jest在scripts中添加test测试命令：
"test:unit": "vue-cli-service test:unit"在项目根目录添加测试配置文件：jest.config.js
jest.config.js文件内容如下：
module.exports = {
preset: '@vue/cli-plugin-unit-jest'
}3.2、官网文档地址：https://vue-test-utils.vuejs.org/zh/
3.3、测试案例源码地址：https://github.com/MuFeiyan/tree-custom.git
3.4、使用api注意事项
1、mount和shallowMount区别：
两者都是创建一个包含被挂载和渲染的 Vue 组件的 Wrapper，但shallowMount不会渲染当前组件的子组件，mount会渲染当前组件和子组件。
2、mount和shallowMount返回的Wrapper不一定完全渲染完成，使用await mount(xxx)可以保证组件已完全渲染好，测试案例中tests/unit/tree.spec.js 第50行，去掉await，执行测试案例， 第66行会报错。
