本文讲解如何在 Vue 3 + Pinia + Jest 环境下，准确测试含 async () => import() 的动态组件逻辑，解决因动态导入返回匿名函数导致断言失败（如 [Function anonymous]）的问题，并提供可落地的 mock、调用与验证方案。
本文讲解如何在 vue 3 + pinia + jest 环境下，准确测试含 `async () => import()` 的动态组件逻辑，解决因动态导入返回匿名函数导致断言失败（如 `[function anonymous]`）的问题，并提供可落地的 mock、调用与验证方案。
在 Vue 组合式函数中使用动态导入（如 async () => import('./Component.vue')）是实现按需加载的常用方式。但 Jest 默认无法解析 ESM 动态导入语法，且其 mock 行为与运行时行为存在差异：mock 后得到的是一个函数（即 () => mockedModule），而非模块本身。因此直接 expect(charts.value[0].component).toBe(component1) 会失败——因为 component1 是 mock 返回的组件对象，而 charts.value[0].component 是一个返回 Promise 的异步函数，Jest 控制台显示 [Function anonymous] 正是这一本质的体现。
✅ 正确的测试思路不是“比对函数引用”，而是 验证该动态导入函数能否被正确调用并返回有效 Promise，进而确保其集成路径（如 <component :is="chart.component">）在渲染时可正常解析。
以下为完整、可复用的测试实践：
1. 正确 Mock 动态组件
// 必须 mock 为默认导出一个组件对象（如 { default: {} }）
jest.mock('./path/component1', () => ({
default: {
name: 'MockComponent1',
render: () => 'mock-component-1'
}
}));⚠️ 注意：jest.mock('./path/component1', () => 'component1') 是错误的——它将模块 mock 成字符串，导致 import() 返回 Promise.resolve('component1')，而非 Promise.resolve({ default: ... })，Vue 无法识别为合法组件。
2. 触发并验证动态导入函数
import { setActivePinia, createPinia } from 'pinia';
import { useCharts } from '@/composables/useCharts';
import { useValidInfo } from '@/stores/validInfo';
describe('useCharts', () => {
beforeEach(() => {
setActivePinia(createPinia());
});
it('should return charts with lazy-loaded component function when isValid is true', async () => {
const store = useValidInfo();
store.setIsValid(true);
const { charts } = useCharts();
const chartItem = charts.value[0];
// ✅ 验证 component 属性是一个函数
expect(typeof chartItem.component).toBe('function');
// ✅ 调用该函数，获取 import Promise
const importPromise = chartItem.component();
expect(importPromise).toBeInstanceOf(Promise);
// ✅ （可选）等待 Promise 解析，验证实际导出内容
const module = await importPromise;
expect(module.default).toHaveProperty('name', 'MockComponent1');
});
});3. 关键注意事项
- 不要直接比较函数引用：charts.value[0].component 是一个新生成的匿名函数（即使多次调用 import()，每次返回的都是独立函数），因此 toBe() 或 toEqual() 断言必然失败。
- 避免在测试中 await 所有动态导入：若组件树较深或依赖多，会导致测试变慢；优先验证“可调用性”和“返回 Promise”即可覆盖核心逻辑。
- 确保 mock 结构符合 Vue 组件规范：必须提供 default 导出，且最好包含 name 或 render，便于调试和后续 mount 测试。
- Pinia 状态需在每个 test 前重置：使用 beforeEach + createPinia() 保证隔离性，避免状态污染。
通过以上方式，你不仅能精准覆盖动态导入逻辑的单元测试，还能确保其与 <component :is> 的集成行为在真实渲染链路中可靠工作。这既是 Jest 最佳实践，也是 Vue 生态中懒加载组件可测试性的关键保障。
