Vue Test Utils 与 Vue Router 的集成测试指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00791/article/details/148575692

Vue Test Utils 与 Vue Router 的集成测试指南

vue-test-utils Component Test Utils for Vue 2 项目地址: https://gitcode.com/gh_mirrors/vu/vue-test-utils

前言

在 Vue 应用开发中，Vue Router 是最常用的路由管理库。当我们使用 Vue Test Utils 进行组件测试时，正确处理 Vue Router 的集成是确保测试可靠性的关键。本文将深入探讨如何在测试环境中优雅地处理 Vue Router 相关组件的测试。

为什么需要特殊处理 Vue Router

Vue Router 在安装时会向 Vue 的原型上添加 $route 和 $router 两个只读属性。这会导致在测试环境中出现以下问题：

无法直接模拟路由对象
全局安装会影响其他测试用例
路由相关组件的渲染需要特殊处理

正确的安装方式

使用 localVue 隔离安装

最佳实践是创建一个 localVue 实例，并在其上安装 Vue Router：

import { shallowMount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'

// 创建独立的 Vue 构造函数
const localVue = createLocalVue()
// 只在该实例上安装 Vue Router
localVue.use(VueRouter)
// 创建路由实例
const router = new VueRouter()

// 在挂载组件时传入配置
shallowMount(Component, {
  localVue,
  router
})

重要提示：即使在 localVue 上安装 Vue Router，$route 和 $router 仍然是只读属性，这意味着你不能通过 mocks 选项来覆盖它们。

处理路由组件

应用中常用的 router-link 和 router-view 组件需要特殊处理才能在测试环境中正常工作。我们有两种主要方法：

方法一：使用存根(Stubs)

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

shallowMount(Component, {
  stubs: ['router-link', 'router-view']
})

这种方法简单快捷，适合单元测试场景，它会用空组件替换路由组件。

方法二：完整安装 Vue Router

import { mount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'

const localVue = createLocalVue()
localVue.use(VueRouter)

mount(Component, {
  localVue,
  router
})

这种方法更适合集成测试，它会提供完整的路由功能，所有子组件都能访问路由实例。

模拟路由对象

在某些测试场景中，我们需要模拟路由参数或测试路由相关逻辑：

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

const $route = {
  path: '/user/123',
  params: { id: '123' }
}

const wrapper = shallowMount(UserComponent, {
  mocks: {
    $route
  }
})

// 在测试中可以访问模拟的路由对象
expect(wrapper.vm.$route.params.id).toBe('123')

注意：这种模拟方式只对当前组件有效，子组件无法访问这些模拟值。如果需要子组件也能访问，应该使用 localVue 安装方式。

常见陷阱与最佳实践

避免全局安装：永远不要在测试中全局安装 Vue Router，这会导致测试污染。
测试隔离：每个测试用例应该使用独立的 localVue 和 router 实例。
选择正确的策略：
- 单元测试：使用存根
- 集成测试：完整安装
路由守卫测试：如果需要测试路由守卫，应该直接测试路由配置而不是通过组件。
异步导航：处理路由跳转时记得使用 await 或 nextTick 等待导航完成。

进阶技巧

测试路由参数变化

// 模拟路由参数变化
wrapper.vm.$route.params.id = '456'
await wrapper.vm.$nextTick()
// 断言组件对参数变化的响应

测试导航行为

// 模拟 router.push 方法
const mockPush = jest.fn()
const wrapper = shallowMount(Component, {
  mocks: {
    $router: {
      push: mockPush
    }
  }
})

// 触发导航
wrapper.find('button').trigger('click')
expect(mockPush).toHaveBeenCalledWith('/expected-path')