Vue 动态导入组件的 Vitest 测试策略与实践

本文旨在解决在 vitest 中测试 vue 3 动态导入组件时遇到的渲染时序问题。通过深入分析 `defineasynccomponent` 和 `import()` 的异步特性，文章将详细介绍如何利用 `vi.dynamicimportsettled()` 确保测试框架等待所有动态导入完成，从而正确渲染组件内容，并提供一套完整的测试策略与最佳实践，确保异步组件的可靠测试。

正文

引言：动态组件与测试挑战

在 Vue 3 应用中，动态导入（Dynamic Import）是一种优化性能和减小初始包大小的常用技术。通过 defineAsyncComponent 结合 import() 语法，我们可以实现按需加载组件。然而，这种异步加载的特性在单元测试中常常会带来挑战，特别是当测试框架在异步组件实际加载并渲染完成之前就执行断言时，可能导致测试失败，即使组件在实际应用中工作正常。

问题场景：组件结构与初步测试尝试

考虑一个 Vue 组件 PageView，它根据路由参数动态导入并渲染一个 Markdown 文件：

<template>
  <component :is="content" />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const content = defineAsyncComponent(() =>
  import(`@/pages/${route.params.path}.md`)
)
</script>

这个组件的核心在于 defineAsyncComponent，它会异步加载位于 @/pages/ 路径下的 Markdown 文件。为了测试这个组件，我们可能会尝试以下 Vitest 测试代码：

import { describe, it, beforeAll, vi } from 'vitest'
import { render } from '@testing-library/vue'
import router from '@/router/index'
import PageView from '@/views/Page.vue'

// 模拟动态导入的Markdown文件内容
vi.mock('@/pages/example.md', () => ({ default: 'Markdown' }))

describe('PageView', () => {
  let wrapper
  beforeAll(async () => {
    // 设置路由参数
    router.push({ name: 'page', params: { path: 'example' } })
    await router.isReady() // 等待路由准备就绪

    // 渲染组件
    wrapper = render(PageView, {
      global: { plugins: [router] },
    })
  })

  it('display a markdown file according to params', () => {
   // 尝试断言渲染内容
   wrapper.getByText('Markdown')
  })
})

尽管我们已经模拟了 example.md 的内容，并且在 beforeAll 钩子中设置了路由并等待其就绪，但上述测试仍然可能失败，报告找不到 Markdown 文本。这是因为 defineAsyncComponent 内部的 import() 调用是一个异步操作，render 函数执行后，测试的 it 块可能在动态导入的组件实际加载并渲染到 DOM 之前就已经执行了。

立即学习“前端免费学习笔记（深入）”；

解决方案：利用 vi.dynamicImportSettled() 处理异步加载

为了确保测试能够正确捕获动态导入组件的渲染结果，我们需要一种机制来等待所有的动态导入操作完成。Vitest 提供了 vi.dynamicImportSettled() 工具函数，它正是为此目的而设计。

vi.dynamicImportSettled() 返回一个 Promise，该 Promise 在所有挂起的动态导入（通过 import() 语法）解析或拒绝后才会被解决。通过在断言之前 await 这个 Promise，我们可以保证动态导入的组件已经加载并渲染到 DOM 中。

Convai Technologies Inc.

对话式 AI API，用于设计游戏和支持端到端的语音交互

87

查看详情

将上述测试代码修改如下：

import { describe, it, beforeAll, vi } from 'vitest'
import { render } from '@testing-library/vue'
import router from '@/router/index'
import PageView from '@/views/Page.vue'

vi.mock('@/pages/example.md', () => ({ default: 'Markdown' }))

describe('PageView', () => {
  let wrapper
  beforeAll(async () => {
    router.push({ name: 'page', params: { path: 'example' } })
    await router.isReady()

    wrapper = render(PageView, {
      global: { plugins: [router] },
    })
  })

  it('display a markdown file according to params', async () => { // 注意这里是 async 函数
    await vi.dynamicImportSettled() // 等待所有动态导入完成
    wrapper.getByText('Markdown')
  })
})

通过在 it 块中添加 await vi.dynamicImportSettled()，我们确保了在执行 wrapper.getByText('Markdown') 断言时，PageView 组件内部的异步导入已经完成，并且模拟的 Markdown 内容已经成功渲染。

测试策略与最佳实践

测试动态导入的 Vue 组件需要一套结构化的方法，以应对其异步特性。以下是一些关键的测试策略和最佳实践：

1. 模拟异步导入内容： 在使用 defineAsyncComponent 导入特定模块时，务必使用 vi.mock() 来模拟这些模块的内容。这不仅可以隔离测试，使其不依赖于实际的文件系统，还能让你控制被导入组件的行为和渲染内容。

   // 假设组件会导入 @/pages/example.md
   vi.mock('@/pages/example.md', () => ({ default: 'This is mocked markdown content' }))

   登录后复制

   确保模拟的路径与 import() 语句中的路径完全匹配。

2. 正确配置 Vue Router： 如果你的组件依赖于 Vue Router 的路由参数，那么在测试环境中必须正确初始化和配置 Vue Router。

   • 导入你的 Router 实例。
   • 使用 router.push() 方法设置测试所需的路由路径和参数。
   • 关键： 务必 await router.isReady()，确保路由系统已经完全初始化并准备就绪，否则组件可能无法正确获取路由参数。
   • 在 render 函数的 global.plugins 中注入 Router 实例。

3. 等待动态导入完成： 这是解决异步组件测试问题的核心。在组件渲染后、执行任何与异步内容相关的断言之前，调用 await vi.dynamicImportSettled()。这会暂停测试执行，直到所有由 import() 触发的模块加载完成。

4. 断言渲染结果： 一旦确认动态导入已完成，就可以使用 @testing-library/vue 提供的查询方法（如 getByText、getByRole 等）来断言组件是否按预期渲染了内容。确保你的断言是针对模拟内容进行的。

5. 隔离与清理：

   • 使用 beforeAll 或 beforeEach 来设置测试环境，例如初始化 Router、渲染组件。
   • 如果需要，使用 afterAll 或 afterEach 来清理测试状态，例如重置 Router 状态，尽管 @testing-library/vue 通常会自动处理 DOM 清理。

总结

测试 Vue 3 中的动态导入组件，关键在于理解其异步加载机制，并利用 Vitest 提供的工具来同步测试流程。通过恰当的模块模拟、正确的路由配置以及最重要的 await vi.dynamicImportSettled()，我们可以有效地解决异步渲染时序问题，确保测试的准确性和可靠性。遵循这些策略和最佳实践，将有助于构建健壮且可维护的 Vue 应用程序测试套件。

以上就是Vue 动态导入组件的 Vitest 测试策略与实践的详细内容，更多请关注php中文网其它相关文章！