Vue Test Utils前端单元测试

含义

单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。在提供了经过测试的单元的情况下,系统集成过程将会大大地简化。

流行框架

Mocha (https://mochajs.cn/)、Jest (https://www.jestjs.cn/)在这里插入图片描述
Mocha + Chai 方式
Mocha 需要引入 chai 或则其他断言库去断言, 如果你需要查看覆盖率报告你还需要安装 nyc 或者其他覆盖率工具
./test/sum.test.js

const { expect, assert } = require('chai');
const sum = require('../sum');

describe('sum', function() {
  it('adds 1 + 2 to equal 3', () => {
    assert(sum(1, 2) === 3);
  });
});

Jest 方式
Jest 默认支持断言,同时默认支持覆盖率测试
./test/sum.test.js

const sum = require('./sum');

describe('sum function test', () => {
  it('sum(1, 2) === 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
  
  // 这里 test 和 it 没有明显区别,it 是指: it should xxx, test 是指 test xxx
  test('sum(1, 2) === 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
})

可见无论是受欢迎度和写法上,Jest 都有很大的优势,因此推荐使用开箱即用的 Jest

Vue Test Utils

Vue.js 官方的单元测试实用工具库。
提供特定的方法,在隔离的环境下,进行组件的挂载,以及一系列的测试。被挂载的组件会返回到一个包裹器内,而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。

Vue Test Utils 使用

方式一:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 基于 Vue前端工具非常丰富,下面列举了一些比较流行的: 1. Vue CLI:官方提供的脚手架工具,能够快速创建 Vue 项目,并提供了许多插件和特性,如 Babel、TypeScript、ESLint、单元测试、代码分割等等。 2. Vuex:官方提供的状态管理库,用于解决组件间共享数据的问题,也提供了一些工具函数帮助你更好地管理状态。 3. Vue Router:官方提供的路由库,用于管理前端路由,支持嵌套路由、动态路由、路由守卫等特性。 4. Vuetify:一款基于 Material Design 的 Vue 组件库,提供了丰富的 UI 组件和样式,能够快速搭建美观的界面。 5. Element:一款基于 Vue 2.0 的组件库,提供了一些常用的 UI 组件,如按钮、表单、对话框等等。 6. Ant Design Vue:一款基于 Ant Design 的 Vue 组件库,提供了一些高质量的 UI 组件,能够快速搭建美观的界面。 7. Vue Test Utils:官方提供的测试工具,能够方便地编写单元测试和集成测试。 8. Vue Devtools:浏览器插件,能够方便地调试 Vue 应用程序。 以上仅是部分常见的工具,实际上还有很多其他的工具和库,如 Nuxt.js、VuePress、VueFire、Vue-i18n 等等。 ### 回答2: 基于Vue前端工具有很多,以下是一些常用的工具: 1. Vue CLI:Vue官方提供的脚手架工具,可以快速搭建基于Vue的项目结构,提供了项目初始化、开发调试、构建打包等功能,方便快捷地进行Vue项目开发。 2. Vue Devtools:Vue开发者工具,是一款Chrome浏览器扩展插件,能够在浏览器中调试Vue应用,查看组件层级结构、数据状态、事件等,提供了便利的调试功能。 3. Vue Router:Vue官方提供的路由管理工具,用于构建单页应用(SPA),通过路由配置实现页面之间的跳转和状态管理,方便用户进行页面间的导航和数据传递。 4. Vuex:Vue官方提供的状态管理工具,用于集中管理Vue应用中的共享状态,通过定义状态、派发和监听状态的变化,实现不同组件之间的数据共享,方便应用的扩展和维护。 5. Element UI:一款基于Vue的桌面端UI组件库,提供了一套美观、易用的UI组件,包括按钮、表单、弹窗等常用组件,可以快速搭建漂亮的前端界面。 6. Vuetify:一款基于Vue的响应式UI框架,提供了丰富的组件和布局系统,实现了Material Design风格,并且支持主题定制,方便开发者创建美观的用户界面。 以上是一些基于Vue前端工具,它们可以提高开发效率、优化用户体验,并且丰富了Vue开发者的工具箱,为项目的开发和调试提供了便利。 ### 回答3: 基于Vue前端工具有很多,以下是其中几个常用的工具: 1. Vue CLI:Vue CLI是一个官方提供的脚手架工具,可以快速搭建Vue项目的基础架构,包括项目配置、Webpack配置等。它还提供了一些插件和命令,方便开发者进行项目的构建、打包、测试等工作。 2. Vue Devtools:Vue Devtools是一个用于Vue调试的浏览器插件,可以通过它来查看Vue组件的层级关系、数据状态、事件等,方便开发者进行调试和性能优化。 3. Vue Router:Vue Router是Vue官方提供的路由管理器,用于实现前端路由的功能。它可以帮助开发者将不同的页面组织成不同的路由,实现页面之间的切换和跳转。 4. Vuex:Vuex是Vue官方推荐的状态管理工具,用于在Vue应用中集中管理和共享状态。通过Vuex,开发者可以将应用中的数据保存在一个全局存储空间中,并通过一些规则来修改和获取这些数据。 5. Element UI:Element UI是一套基于Vue的UI组件库,提供了丰富的UI组件,包括表单、弹框、导航、菜单等,方便开发者快速构建符合设计规范的界面。 6. Vue Test UtilsVue Test UtilsVue官方提供的测试工具库,用于编写和运行Vue组件的单元测试。它提供了一些API和工具函数,帮助开发者编写可靠和高效的测试用例。 除了上述的工具之外,还有许多第三方的Vue工具和插件可供选择,开发者可以根据自己的需求选择和使用。这些工具和插件都可以提高开发效率、简化开发流程,使得基于Vue前端开发更加轻松和便捷。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值