使用 Jest 进行 Vue 单元测试

简介: 使用 Jest 进行 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 项目中的简单应用,希望对你有帮助。


目录
相关文章
|
6天前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
17 2
|
6天前
|
JavaScript 测试技术 API
Jest进阶:测试 Vue 组件
Jest进阶:测试 Vue 组件
|
7天前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
21 2
|
9天前
|
前端开发 JavaScript 测试技术
React 模拟测试与 Jest
【10月更文挑战第21天】本文介绍了如何使用 Jest 进行 React 组件的单元测试和模拟测试,涵盖了基础概念、常见问题及解决方案,并提供了实践案例。通过学习本文,你将掌握如何有效地使用 Jest 提高代码质量和稳定性。
21 1
|
2月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境,包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件,并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
80 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
|
30天前
|
人工智能 监控 JavaScript
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
25 1
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
158 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
1月前
|
JavaScript
vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
vue尚品汇商城项目-day07【55.编码测试与打包发布项目】
29 3
|
2月前
|
JavaScript 测试技术
vue配置生产环境.env.production、测试环境.env.development
该文章介绍了如何在Vue项目中配置和使用不同的环境变量文件(.env、.env.production、.env.development)以适应开发、测试和生产环境,并通过修改`package.json`中的scripts来实现不同环境的打包。
348 0
vue配置生产环境.env.production、测试环境.env.development
|
1月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
38 0