使用 Jest 进行 Vue 单元测试

Posted 2022-12-04 zhoumingjie

本文介绍：
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

jest 官网

vue-cli3 插件部分

 

推荐文章：

Vue 应用单元测试的策略与实践