测试异步组件需模拟Promise状态：Vue用defineAsyncComponent包裹可控Promise，React用React.lazy配合act触发resolve/reject；均须确保Suspense直接包裹组件、避免条件渲染、禁用setTimeout，通过断言fallback与default内容验证行为。

测试依赖 Vue 3 异步组件加载或 React Suspense 的逻辑，核心在于**模拟异步边界行为**，而非真实发起网络请求或等待真实延迟。重点是验证 fallback 是否如期渲染、default 内容是否在 resolve 后正确挂载、错误状态能否被捕获并展示——这些都可通过控制 Promise 状态来精准触发。

Vue 3：用 mock 组件 + 手动 resolve/reject

在单元测试（如 Vitest + Vue Test Utils）中，不直接 import 异步组件，而是用 defineAsyncComponent 包裹一个可控的 Promise：

• 用 jest.fn() 或 vi.fn() 模拟加载函数，返回 new Promise(resolve => {...})
• 在 test 中保留 resolve 和 reject 的引用，按需调用以模拟 success / error / pending 状态
• 包裹被测组件时，确保 是其直接父级，且 #default 插槽内只有该异步组件（否则 Suspense 不会拦截）
• 断言：初始渲染应包含 fallback 文本；调用 resolve 后，用 await nextTick() 等待更新，再检查 default 内容是否出现

React：用 act + 自定义 render + Promise 控制

React Testing Library（RTL）本身不感知 Suspense，需配合 act 和可控制的异步组件：

Antd Vue Components

学习并查找 ant-design-vue（Vue 3）组件的使用方式，包括变体、运行示例、Vue 3 SFC 代码以及关键 props/events/slots。当用户询问如何使用 ant-design-vue 时使用。

下载

• 将待测组件封装为一个返回 Promise.resolve() 的函数，用 React.lazy(() => promise) 创建 lazy 组件
• 在 test 中，先 render，此时会进入 fallback；再用 await act(async () => { await promise }) 触发 resolve
• 注意：必须使用 act 包裹异步操作，否则 RTL 会报 “not wrapped in act” 警告
• 若要测错误边界，用 Promise.reject(new Error('...'))，并确保外层有 ErrorBoundary 组件捕获

共通关键点：避免常见陷阱

两类框架测试都容易踩坑，需特别注意：

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

• 异步组件不能嵌套在 v-if / conditional rendering 中：Suspense 只监听 direct child，条件渲染会绕过它
• 不要用 setTimeout 模拟延迟：不可控、难断言、易导致 flaky test；始终用 Promise + resolve 控制
• 清理副作用：比如组件内部启动了定时器或 fetch，在 unmount 后需 clearTimeout / abort，否则可能影响后续测试
• 区分 setup() 中的 await 和 defineAsyncComponent：两者都会触发 Suspense，但测试方式一致——都是 mock 对应的 Promise