vue 单元测试初探

一、前言

单元测试是开发过程中不可或缺的一环，其中包括了我们期望程序能实现的各种需求、场景，以及应对各种异常情况的正确性验证。在前端开发中，我们通常使用 Jest、Mocha、Chai 等工具来进行单元测试，本文主要介绍 Vue 单元测试的初探。

二、Vue 测试环境配置

1.创建项目

首先需要创建一个空白项目，即：npm init -y 或 yarn init -y

2.安装依赖

安装以下依赖：

• Vue 以及相应的开发依赖 vue-test-utils 和 @vue/test-utils
• Jest、babel-jest、vue-jest 和 babel-core、babel-preset-env

Vue 是我们主要使用的框架，vue-test-utils 和 @vue/test-utils 是为 Vue 编写的测试工具库，以及 Jest 是我们主要使用的测试框架。babel 相关的依赖是用于编译 Vue 项目的。

3.编写测试用例

在项目/test/unit/specs 目录下创建一个 demo.spec.js 文件，编写测试用例，例如：

import { shallowMount } from '@vue/test-utils'
import Demo from '@/components/Demo.vue'

describe('Demo.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello, world!'
    const wrapper = shallowMount(Demo, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

describe 是 Jest 中的一个内置函数，用来创建一个测试套件。

it 也是 Jest 中的一个内置函数，用来创建一个测试用例。

shallowMount 是 vue-test-utils 中提供的一个函数，用于快速创建一个 Vue 组件的包装器。

expect 是 Jest 中用于断言的内置函数，用于判断测试结果是否符合预期。

4.运行测试用例

可以在 package.json 中添加以下 scripts：

"scripts": {
  "test": "jest"
},

然后在终端中运行 npm test 或 yarn test 即可运行测试用例。

三、示例说明

1.深度挂载和浅度挂载的区别

在编写测试用例时，我们可能需要测试组件内部的子组件或 HTML 元素的存在性或渲染结果。这时需要用到挂载选项。比如以下组件：

<template>
  <div>
    <h1>Title</h1>
    <p>Content in here</p>
    <div class="child">Child Component</div>
  </div>
</template>

我们可以使用 shallowMount 进行浅度挂载测试用例：

describe('Demo.vue', () => {
  it('renders title and paragraph', () => {
    const wrapper = shallowMount(Demo)
    expect(wrapper.contains('h1')).toBe(true)
    expect(wrapper.contains('p')).toBe(true)
  })

  it('renders the child component', () => {
    const wrapper = shallowMount(Demo)
    expect(wrapper.contains('.child')).toBe(true)
  })
})

也可以使用 mount 进行深度挂载测试用例：

describe('Demo.vue', () => {
  it('renders title and paragraph', () => {
    const wrapper = mount(Demo)
    expect(wrapper.contains('h1')).toBe(true)
    expect(wrapper.contains('p')).toBe(true)
  })

  it('renders the child component', () => {
    const wrapper = mount(Demo)
    expect(wrapper.contains('.child')).toBe(true)
  })
})

浅度挂载只挂载当前组件，不会渲染子组件或 HTML 元素，而深度挂载则会渲染子组件和 HTML 元素，还会执行完整的生命周期钩子函数。

2.异步请求处理

在测试中，我们可能会测试异步请求的正确性。例如以下组件：

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    fetchMsg () {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          this.msg = 'Hello, world!'
          resolve()
        }, 1000)
      })
    }
  },
  created () {
    this.fetchMsg()
  }
}
</script>

可以使用 async/await，或者 done 回调，来测试异步请求的正确性。例如：

import { shallowMount } from '@vue/test-utils'
import Demo from '@/components/Demo.vue'

describe('Demo.vue', () => {
  it('fetches async data', async () => {
    const wrapper = shallowMount(Demo)
    await wrapper.vm.fetchMsg()
    expect(wrapper.vm.msg).toBe('Hello, world!')
  })

  it('fetches async data with done callback', done => {
    const wrapper = shallowMount(Demo)
    wrapper.vm.fetchMsg()
    wrapper.vm.$nextTick(() => {
      try {
        expect(wrapper.vm.msg).toBe('Hello, world!')
        done()
      } catch (err) {
        done(err)
      }
    })
  })
})

其中，async/await 让我们可以等待异步请求完成后再判断测试结果，而 done 回调是 Jest 的一种方式，它可以让我们等待异步请求完成后再调用 done 回调来结束测试用例运行。

四、总结

Vue 单元测试可以帮助我们确保代码的正确性和可读性，通过本文介绍的初步配置和示例，可以了解单元测试的基本使用方法。在实际开发中，更复杂的测试场景需要根据实际需求进行相应的配置和编写。