本文介绍:
1、vue-cli3下jest环境的搭建
2、vue组件基本的测试方法
环境配置
vue-cli3 的插件使安装流程变得格外简单,通过 vue ui 启动可视化管理系统,在插件栏,点击 ‘添加插件’,搜索 @vue/cli-plugin-unit-jest,点击安装就可以了,对应命令行的 vue add @vue/cli-plugin-unit-jest 命令;这个过程实际上是包含了安装和调用两个步骤,并且会把相关的依赖一并安装进来,这样就不需要自己一个一个的安装每个依赖了。
安装完成后,会发现package.json 文件里多了这些依赖
在根目录会发现新生成了一个 test 文件夹,里面有一个 .spec.js 后缀的示例文件,用 packgae.json 里的 test:unit 指令直接运行,就可以调用 jest 的测试了,系统会匹配所有 .spec.js 或者 .test.js 后缀的文件并执行期中的代码,正常的结果如下。
环境配置到这里基本就结束了。
vue 单文件测试案例
下面我通过一个简单的 vue组件 来介绍最基础的测试用例编写,以element-ui 的 alert 组件为例,对于一个vue 组件,核心的测试指标因该是 props 接口,alert.vue