如何测试Vue中动态导入的组件？解决测试无渲染问题

你的Vue组件通过路由参数异步加载Markdown文件，实际运行正常，但测试时无法渲染内容，以下是相关代码和解决方案：

待测试的Vue组件 #

<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>

原有测试代码 #

import { describe, it, beforeAll, vi } from 'vitest'
import { render } from '@testing-library/vue'

import router from '@/router/index'
vi.mock('@/pages/example.md', () => ({ default: 'Markdown' }))
import PageView from '@/views/Page.vue'

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')
  })
})

解决方案 #

问题核心在于异步组件加载时机和测试环境的路由、mock适配，调整方式如下：

1. 等待异步组件渲染完成 #

defineAsyncComponent 是异步加载的，render 不会自动等待组件解析完成，需用 findByText（支持等待元素出现）替换 getByText：

it('display a markdown file according to params', async () => {
  await wrapper.findByText('Markdown')
})

2. 简化路由参数模拟 #

直接mock useRoute 钩子比操作真实路由更可靠，避免测试环境的路由状态问题：

vi.mock('vue-router', async () => {
  const original = await vi.importActual('vue-router')
  return {
    ...original,
    useRoute: () => ({
      params: { path: 'example' }
    })
  }
})

3. 匹配Markdown Loader的输出格式 #

项目中Markdown文件会被loader转译为Vue组件，mock时需返回组件格式而非纯文本：

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

完整修改后的测试代码 #

import { describe, it, vi } from 'vitest'
import { render, screen } from '@testing-library/vue'

import PageView from '@/views/Page.vue'

// Mock vue-router的useRoute钩子
vi.mock('vue-router', async () => {
  const original = await vi.importActual('vue-router')
  return {
    ...original,
    useRoute: () => ({
      params: { path: 'example' }
    })
  }
})

// Mock Markdown文件为Vue组件
vi.mock('@/pages/example.md', () => ({
  default: {
    template: '<div>Markdown</div>'
  }
}))

describe('PageView', () => {
  it('display a markdown file according to params', async () => {
    render(PageView)
    // 等待异步组件加载并渲染完成
    await screen.findByText('Markdown')
  })
})

内容的提问来源于stack exchange，提问作者Chiara Ani