Vue组件如何进行单元测试
本篇内容介绍了“Vue组件如何进行单元测试”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
我们先来简单解释一下单元测试：就是对函数的输入输出进行测试，使用断言的方式，判断我们输入的用例的结果和我们实际输入的结果是否相同
组件的单元测试就是使用单元测试工具，对组件的各种状态和行为进行测试
组件单元测试的好处
提供描述组件行为的文档
节省手动测试的时间
减少研发新特性时产生的bug
改进设计
促进重构
准备工作
在我们进行单元测试模拟之前，我们需要对环境进行一些配置
安装依赖
Vue Test Utils （学习视频分享：vuejs教程）
npm install --save-dev jsdom jsdom-global
Jest
npm install --save-dev jest
vue-jest
npm install --save-dev @vue/vue2-jest # (use the appropriate version)
babel-jest
yarn add --dev babel-jest @babel/core
安装测试依赖
yarn add jest @vue/test-utils vue-jest babel-jest -D -W
这里有点小问题，如果使用下发的命令进行安装的话会出现一点点的小错误
yarn add jest @vue/test-utils vue-jest babel-jest -D
报错截图：
Jest 的配置
jest.config.js
module.exports = {
"testMatch": ["**/__tests__/**/*.[jt]s?(x)"],
"moduleFileExtensions": [
"js",
"json",
// 告诉 Jest 处理 `*.vue` 文件
"vue"
],
"transform": {
// 用 `vue-jest` 处理 `*.vue` 文件
".*\\.(vue)$": "vue-jest",
// 用 `babel-jest` 处理 js
".*\\.(js)$": "babel-jest"
}
}基于上面的测试文件的配置，我们会将每个测试文件的配置放置于__tests__下
创建测试用例：
我们使用：packages\input 的 input 组件进行测试
在packages\input 文件夹下 创建 __tests__ 文件夹 后创建 input.test.js
这里先给大家普及一下几个常用的API
测试用例1 判断是否是文本框
import input from '../src/input.vue'
import { mount } from '@vue/test-utils' // 挂载
describe('lg-input', () => {
test('input-text', () => {
const wrapper = mount(input)
expect(wrapper.html()).toContain('input type="text"')
})
})这里我们需要 使用@vue/test-utils提供的mount方法进行挂载，注意，这里只是在内存中进行挂载，并且我们需要保存这个包裹器返回的内容
const wrapper = mount(input)
这个用例很简单，就是想要知道我们生产的是否是一个文本框，这里一个简单的测试用例就写完了，接着我们运行一下：
yarn test
运行结果
修改用例
expect(wrapper.html()).toContain('input type="tex123123123t"')运行结果
测试失败，提示没有找到input type="tex123123123t"的内容，符合预期，没有问题。
测试用例2 判断是否是密码框
test('input-password', () => {
const wrapper = mount(input, {
propsData: {
type: 'password'
}
})
expect(wrapper.html()).toContain('input type="password"')
})我们可以通过propsData来进行设置组件的props属性
运行结果
测试用例3 组件接收值是否正确
test('input-password', () => {
const wrapper = mount(input, {
propsData: {
type: 'password',
value: 'admin'
}
})
expect(wrapper.props('value')).toBe('admin')
})这里我们通过wrapper.props获取他的props属性，拿到这个值之后，进行判断
运行结果
测试用例4 快照的使用
test('input-snapshot', () => {
const wrapper = mount(input, {
propsData: {
type: 'text',
value: 'admin'
}
})
expect(wrapper.vm.$el).toMatchSnapshot()
})我们要把挂载的dom对象拍一个快照，我们第一次调用这个方法的时候，他会把这个内容挂载到一个特殊的文本文件中，当我们再次生产测试的时候，会将我们刚刚存储的文件进行对比，如果发生了变化就会出现测试失败的情况
文件结构：
修改快照的propsData
propsData: {
type: 'password',
value: 'admin'
}测试结果
删除快照结果，重新生成
yarn test -u
“Vue组件如何进行单元测试”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注蜗牛博客网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论