vitest 单元测试配合@vue/test-utils 之 axios 篇

what is vitest & VueTestUtils & axios

vitest 是由 vite 提供支持的极速单元测试框架，VueTestUtils 是 Vue.js 的官方测试实用程序库，Axios 是一个基于 promise 的网络请求库，以上均为各自官网对其的描述

demo

项目中使用 axios 是非常常见的，所以我们可以对他做一个单元测试，在 test-utils 的文档中提到除了 jest.mock()还可以使用axios-mock-adapter，其实我们可以使用 vitest 的 vi.mock()来完成，但是翻看了axios-mock-adapter库的示例后，明白了官方的推荐并不是不无道理，所以此篇 demo 引入该库来完成

// component
<script setup lang="ts">
import { ref } from 'vue'
import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'

const name = ref('李四')
const mock = new MockAdapter(axios)
const resulst = { name: '张三', age: 18 }
mock.onGet('/user').reply(200, resulst)
const handleRequestChange = () => {
  axios.get('/user').then(res => {
    name.value = res.data.name
  })
}
</script>

<template>
  <span>{{ name }}</span>
  <button @click="handleRequestChange">get</button>
</template>

import { describe, it, expect, vi } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import axios from 'axios'
import RequestService from '@/views/RequestService.vue'
describe('axios-tets', () => {
  it('tets1', async () => {
    const spy = vi.spyOn(axios, 'get')
    const wrapper = mount(RequestService)
    await wrapper.find('button').trigger('click')
    expect(spy).toHaveBeenCalledTimes(1)
    expect(spy).toHaveBeenCalledWith('/user')
  })
  it('test2', async () => {
    const wrapper = mount(RequestService)
    expect(wrapper.find('span').text()).toContain('李四')
    await wrapper.find('button').trigger('click')
    await flushPromises()
    expect(wrapper.find('span').text()).toContain('张三')
  })
})

1. demo 由两部分组成，组件和测试文件
2. 组件的逻辑非常简单，使用axios-mock-adapter创建一个 mock 数据，模拟 get 请求，页面有一个初始值，按钮按下发送网络请求，更新页面的数据
3. 测试文件有两组测试，第一组和上一篇测试 router 里面的编程式路由很相似，首先监听 axios 的 get 方法，然后挂载组件，触发组件的点击事件，然后断言函数是否被调用过指定次数、是否调用过并且传入指定参数
4. 第二组就更加熟悉了，之前的三篇都做过类似的测试，挂载组件然后查找元素，断言元素的文本是否与预期值一致，flushPromises方法会刷新所有已解决的 promise 程序

tips

同样的这是一个简单的 demo，但它还是有很多值得注意的知识点

• axios-mock-adapter 一个 axios 适配器，可以轻松模拟请求，文中只用到了 get 请求，但其实他有着丰富的功能，无论是单元测试还是实际开发中后端没有开发出接口需要自己模拟数据时都很适用，推荐~~
• vi.mock 可以使用 vi.spyOn()监听 axios 的 get 请求来跟踪 mock 执行

const result = {name: '张三'， age: 18}
vi.spyOn(axios, 'get').mockResolvedValue(result)
// mockResolvedValue 异步函数被调用时接收一个resolve值

其他文章

vitest 单元测试配合@vue/test-utils 之组件单元测试篇
vitest 单元测试配合@vue/test-utils 之 pinia 篇
vitest 单元测试配合@vue/test-utils 之 router 篇