本文介绍:
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 文件内定义了下面几个 prop:
我的测试代码如下, 讲解部分都写到了注释里:
- import { mount } from '@vue/test-utils' // 创建一个包含被挂载和渲染的 Vue 组件的 Wrapper
- import { mount } from '@vue/test-utils' // 创建一个包含被挂载和渲染的 Vue 组件的 Wrapper
- import Alert from '@/components/alert/index.vue'; // 引入组件
- describe('Alert', () => { // describe 代表一个作用域
- it('create', () => {
- // 'creat' 这里只是一个自定义的描述性文字
- const wrapper = mount(Alert, {
- // 通过 mount 生成了一个包裹器, 包括了一个挂载组件或 vnode, 以及测试该组件或 vnode 的方法
- propsData: {
- title: 'title',
- showIcon: true
- }
- // 可以带参数, 这里我通过 propsData 传递了接口数据
- })
- expect(wrapper.find('.el-alert__title').text()).toEqual('title');
- expect(wrapper.vm.visible).toBe(true);
- // .vm 可以获取当前实例对象, 相当于拿到了 vue 组件里的 this 对象
- // find() 可以匹配各种类型的选择器, 类似于选中 DOM, text() 就是获取其中的内容
- // toEqual 是一个断言, 判断结果为'title' 时, 通过测试, 否则猜测是失败
- });
- it('type', () => {
- const wrapper = mount(Alert, {
- propsData: {
- title: 'title',
- showIcon: true,
- type: 'success'
- }
- })
- expect(wrapper.classes('el-alert--success')).toBe(true);
- // classes() 方法, 返回 class 名称的数组. 或在提供 class 名的时候返回一个布尔值
- // toBe 和 toEqual 类似, 区别在于 toBe 更严格限于同一个对象, 如果是基本类型则没什么区别
- });
- it('description', () => {
- const wrapper = mount(Alert, {
- propsData: {
- title: 'Dorne',
- description: 'Unbowed, Unbent, Unbroken',
- showIcon: true
- }
- })
- expect(wrapper.find('.el-alert__description').text()).toEqual('Unbowed, Unbent, Unbroken');
- });
- it('title slot', () => {
- const wrapper = mount(Alert, {
- propsData: {
- title: 'Dorne'
- },
- slots: {
- title: '<span>foo</span>'
- }
- })
- // 这里通过 slots 属性, 添加了一个 slot 插槽, 然后来判断插槽内容是否正确渲染进去了
- expect(wrapper.find('.el-alert__title').text()).toEqual('foo')
- });
- it('close', () => {
- const wrapper = mount(Alert, {
- propsData: {
- title: 'test'
- }
- })
- wrapper.find('.el-alert__closebtn').trigger('click')
- expect(wrapper.vm.visible).toBe(true)
- // trigger() 可以触发一个事件, 这里模拟了点击
- });
- });
上面的 测试用例, 覆盖了 alert 组件的 prop 和 click 事件, 这些是 vue 单文件测试中的最常用的部分, 执行下 NPM run test:unit 看下效果
表格里的是关于代码覆盖率的指标, 默认是关闭的, 需要在 jest.config.JS 中配置下,
- "collectCoverage": true,
- "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]
Test Suites 为一组集合, 通常一个测试文件对应一个 Test Suites, Tests 为所有测试实例的个数, 我们这里所有的测试实例都通过了测试, 所以显示 passed, 如果有某个 test 测试失败, 会有 fail 输出:
Okay, 以上就是 jest 在 vue 项目中的简单应用, 希望对你有帮助.
Jest 进阶部分
相关文档:
Vue Test Utils https://vue-test-utils.vuejs.org/zh/
jest 官网 https://jestjs.io/zh-Hans/
vue-cli3 插件部分
来源: https://www.cnblogs.com/zhoumingjie/p/11589469.html