首页 技术文章 web前端 什么是单元测试?Vue 组件怎么进行单元测试?
正文 评论

什么是单元测试?Vue 组件怎么进行单元测试?

本篇文章带大家了解一下Vue 组件的单元测试,介绍一下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

报错截图:

什么是单元测试?Vue 组件怎么进行单元测试?

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\\inputinput 组件进行测试

packages\\input 文件夹下 创建 __tests__ 文件夹 后创建 input.test.js

这里先给大家普及一下几个常用的API

什么是单元测试?Vue 组件怎么进行单元测试?

测试用例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

运行结果

什么是单元测试?Vue 组件怎么进行单元测试?

修改用例

expect(wrapper.html()).toContain('input type="tex123123123t"')

运行结果

什么是单元测试?Vue 组件怎么进行单元测试?

什么是单元测试?Vue 组件怎么进行单元测试?

测试失败,提示没有找到input type="tex123123123t"的内容,符合预期,没有问题。

测试用例2 判断是否是密码框

 test('input-password', () => {
    const wrapper = mount(input, {
      propsData: {
        type: 'password'
      }
    })
    expect(wrapper.html()).toContain('input type="password"')
  })

我们可以通过propsData来进行设置组件的props属性

运行结果

什么是单元测试?Vue 组件怎么进行单元测试?

测试用例3 组件接收值是否正确

  test('input-password', () => {
    const wrapper = mount(input, {
      propsData: {
        type: 'password',
        value: 'admin'
      }
    })
    expect(wrapper.props('value')).toBe('admin')
  })

这里我们通过wrapper.props获取他的props属性,拿到这个值之后,进行判断

运行结果

什么是单元测试?Vue 组件怎么进行单元测试?

测试用例4 快照的使用

  test('input-snapshot', () => {
    const wrapper = mount(input, {
      propsData: {
        type: 'text',
        value: 'admin'
      }
    })
    expect(wrapper.vm.$el).toMatchSnapshot()
  })

我们要把挂载的dom对象拍一个快照,我们第一次调用这个方法的时候,他会把这个内容挂载到一个特殊的文本文件中,当我们再次生产测试的时候,会将我们刚刚存储的文件进行对比,如果发生了变化就会出现测试失败的情况

文件结构:

什么是单元测试?Vue 组件怎么进行单元测试?

修改快照的propsData

propsData: {
    type: 'password',
    value: 'admin'
}

测试结果

什么是单元测试?Vue 组件怎么进行单元测试?

什么是单元测试?Vue 组件怎么进行单元测试?

删除快照结果,重新生成

yarn test -u

总结

到这里我们的单元测试简单版 Demo 就这样完结了,单元测试对我们进行组件化的开发还是非常重要的,配合 stroyBooks,我们可以做到很多

(学习视频分享:web前端开发)

以上就是什么是单元测试?Vue 组件怎么进行单元测试?的详细内容,更多请关注主题君其它相关文章!

-=||=-收藏赞 (0)
更多主题
单栏极简文艺WordPress博客主题:Diaspora主题
¥ 0 关注:20,393
详情
简约黑白WordPress个人博客主题:Personal主题
¥ 0 关注:20,242
详情
v1.0.0
小程序收录免费WordPress主题:XCX主题
¥ 0 关注:20,050
详情
v1.0.0
一款简约单栏的免费WordPress博客主题:itheme主题
¥ 0 关注:18,251
详情
功能丰富切轻量的WordPress虚拟资源主题:Rizhuti主题
¥ 599 关注:18,208
详情
大气优雅免费WordPress博客主题:HONEY主题
¥ 0 关注:15,047
详情
回复
暂无评论

不要再留垃圾评论了,主题君整理资源不容易,留几句鼓励的话吧。