本文带大家了解一下Vue 元件的单元测试卷，介绍一下Vue 部件配备单元测试卷，开展模块测试方式，希望能帮助到大家！
我们先来简易解释一下单元测试卷：便是对函数的输出进行检测，应用肯定的形式，分辨大家键入用例的结论跟我们具体输入结论是不是同样
元件的单元测试卷就是使用单元测试工具，对元件的各种各样状况和个人行为进行检测
部件单元测试卷带来的好处
前期准备工作
在我们进行单元测试卷仿真模拟以前，我们应该对空间进行一些配备
组装依靠
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__下
建立功能测试：
项目地址：https://gitee.com/liuyinghao123/task/tree/master/Part7/element
我们使用：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
汇总
到这儿我们自己的单元测试卷简单版 Demo 就是这样完结了，单元测试卷对我们进行组件化的研发还是很重要的，相互配合 stroyBooks，大家能做到许多
（学习培训视频共享：web前端开发）
以上就是关于什么叫单元测试卷？Vue 部件如何进行单元测试卷？的具体内容，大量欢迎关注AdminJS其他类似文章！