什么是单元测试？ 如何对 Vue 组件进行单元测试？

本文带你了解Vue组件的单元测试，介绍Vue组件的配置单元测试，以及单元测试的方法。 希望对您有所帮助！

先简单说明一下单元测试：就是测试函数的输入输出btc单元测试，用断言判断我们输入的用例结果和我们实际输入的结果是否一样

组件的单元测试就是使用单元测试工具来测试组件的各种状态和行为

组件单元测试的好处

准备

在我们进行单元测试模拟之前，我们需要对环境进行一些配置

安装依赖项

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

登录复制

这里有个小问题。 如果使用下发的命令安装btc单元测试，会有一点错误

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 的输入组件进行测试

在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方法进行挂载。 注意这里只是挂载在内存中，我们需要保存这个wrapper返回的内容

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，我们可以做很多事情