vue 组件测试（自动化）

最新推荐文章于 2024-06-01 16:23:37 发布

buler_sky

最新推荐文章于 2024-06-01 16:23:37 发布

阅读量1.6k

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/buler_sky/article/details/115766588

版权

17 篇文章 0 订阅

订阅专栏

`1、为什么需要组件测试`

测试可以提高代码质量，这是毋庸置疑的，但前端开发过程中，业务逻辑和样式常常需要调整，这样导致测试案例也需要调整，如果大范围的对前端的代码进行测试，投入和产出不成正比，这里我推荐可以进行小范围测试，比如对通用组件进行测试，理由有如下2点：

1、通用组件使用的范围广而修改的频率低，对其进行测试产出高；

2、对通用组件修改后，执行测试案例不通过，说明可能此次的修改没有兼容之前的组件功能，可以帮助开发者减少修改组件后产出的bug。

结合我自己的组件库项目，使用了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官网文档说明里，没有这块相关的测试方案。

方式一：

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'

}

1、mount和shallowMount区别：

两者都是创建一个包含被挂载和渲染的 Vue 组件的 Wrapper，但shallowMount不会渲染当前组件的子组件，mount会渲染当前组件和子组件。

2、mount和shallowMount返回的Wrapper不一定完全渲染完成，使用await mount(xxx)可以保证组件已完全渲染好，测试案例中tests/unit/tree.spec.js 第50行，去掉await，执行测试案例，第66行会报错。

我的另一篇博客里写了vue框架里写了如何使用storybook来展示组件、生成组件使用文档：https://blog.csdn.net/buler_sky/article/details/115459131

关注