测试异步组件需模拟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
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
