本篇文章带大家了解一下Vue 组件的单元测试,介绍一下Vue 组件配置单元测试,进行单元测试的方法,希望对大家有所帮助!
我们先来简单解释一下单元测试:就是对函数的输入输出进行测试,使用断言的方式,判断我们输入的用例的结果和我们实际输入的结果是否相同
组件的单元测试就是使用单元测试工具,对组件的各种状态和行为进行测试
组件单元测试的好处
在我们进行单元测试模拟之前,我们需要对环境进行一些配置
安装依赖
npm install --save-dev jsdom jsdom-global
npm install --save-dev jest
npm install --save-dev @vue/vue2-jest # (use the appropriate version)
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前端开发)
Atas ialah kandungan terperinci Apakah ujian unit? Bagaimana untuk menguji unit komponen Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!