单例弹窗异步确认的核心是确保唯一实例与Promise正确响应用户操作。需用闭包保存实例及回调，测试覆盖单例性、Promise状态、DOM清理及并发处理，推荐Jest+jsdom单元测试，辅以Cypress/E2E验证集成行为。
单例弹窗的异步确认返回，核心在于确保同一时刻只有一个弹窗实例，并能正确接收用户操作（如点击“确定”或“取消”）后 resolve 或 reject 对应的 Promise。测试的关键是验证：弹窗不重复创建、Promise 正确响应用户交互、多次调用能按顺序处理或合理拒绝。
1. 确保弹窗是真正的单例
用闭包或模块私有变量保存当前弹窗实例和待 resolve/reject 的回调，避免每次调用都新建 DOM 节点或 Promise。例如：
let currentDialog = null;
let pendingResolve = null;
let pendingReject = null;
function confirmDialog(message) {
return new Promise((resolve, reject) => {
if (currentDialog) {
// 已存在弹窗：可选择忽略新请求，或排队/覆盖
reject(new Error('Dialog is already open'));
return;
}
currentDialog = createModalElement(message);
document.body.appendChild(currentDialog);
const handleConfirm = () => {
cleanup();
resolve(true);
};
const handleCancel = () => {
cleanup();
resolve(false); // 或 reject(new Error('canceled'))
};
currentDialog.querySelector('.confirm').onclick = handleConfirm;
currentDialog.querySelector('.cancel').onclick = handleCancel;
});
}
function cleanup() {
if (currentDialog) {
currentDialog.remove();
currentDialog = null;
}
}
2. 单元测试要点（推荐 Jest + jsdom）
测试需覆盖正常流程、并发调用、异常清理等场景。重点检查 Promise 状态、DOM 状态、事件绑定是否正确：
-
验证 Promise 被正确 resolve/reject：使用
await expect(confirmDialog(...)).resolves.toBe(true)模拟点击确认按钮 -
验证单例性：连续两次调用
confirmDialog()，第二次应被拒绝（或返回同一个 Promise），且 DOM 中仅存在一个弹窗节点 -
模拟用户交互：用
fireEvent.click(screen.getByText('确定'))（React Testing Library）或原生el.click()触发事件，再 await Promise 结果 -
验证清理逻辑：弹窗关闭后，
currentDialog应为null，对应 DOM 节点应从 document 移除
3. 测试并发调用的常见陷阱
若业务允许“排队”而非拒绝，需额外维护 Promise 队列。此时测试要验证：前一个关闭后，下一个才显示；Promise 按调用顺序 resolve。但多数场景建议直接拒绝后续请求，更易测试和调试。
立即学习“Java免费学习笔记（深入）”；
4. 真实环境补充验证（E2E 可选）
在 Cypress 或 Playwright 中可进一步验证：
- 快速连点多次「打开弹窗」按钮，页面只出现一个弹窗
- 点击「确定」后，Promise 返回 true，且后续逻辑（如提交表单）被触发
- 刷新或切换路由后，弹窗自动销毁，无内存泄漏
