JavaScript 中怎么 Mock 弹窗组件的异步确认交互-js教程-PHP中文网

mock弹窗组件异步交互的核心是拦截调用并控制promise时机与结果：1. 替换为可控mock函数；2. 用resolve/reject模拟点击行为；3. 验证后续业务逻辑；4. 按序处理多弹窗场景。

javascript 中怎么 mock 弹窗组件的异步确认交互

在 JavaScript 单元测试中 Mock 弹窗组件的异步确认交互，核心是**拦截弹窗调用、控制返回 Promise 的时机与结果**，让测试能主动触发“点击确定”或“点击取消”，从而验证后续逻辑（如 API 调用、状态更新）是否按预期执行。

假设你使用的是封装好的全局弹窗方法（如 Dialog.confirm 或 MessageBox.confirm），在测试前用 jest.mock 或手动替换方式将其替换成返回 Promise 的 mock 函数：

如果是 ES 模块且支持自动 mock：用 jest.mock('./dialog')，然后在测试中通过 mockResolvedValue / mockRejectedValue 控制结果
如果是直接挂载在 window 或全局对象上的方法（如 Antd.Modal.confirm），可在 beforeEach 中临时覆盖：
```
const originalConfirm = Antd.Modal.confirm;<br>Antd.Modal.confirm = jest.fn(() => Promise.resolve(true));
```
记得在 afterEach 中恢复原方法，避免污染其他测试

真实弹窗的确认/取消会分别 resolve 或 reject 对应的 Promise。测试中需模拟这两种路径：

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

模拟点击“确定”：mock 返回 Promise.resolve(true)（或自定义值，如 { ok: true }）
模拟点击“取消”：mock 返回 Promise.resolve(false) 或 Promise.reject(new Error('cancel'))，取决于组件设计
若需分步断言（例如先检查弹窗是否被调用，再决定点确定），可用 Promise.resolve().then(() => {/* 点击逻辑 */}) 延迟 resolve，或使用 jest.runOnlyPendingTimers() 配合 await waitFor

弹窗 Promise settle 后，通常会触发后续操作（如调用 API、更新 state）。测试中要确保这些副作用被正确执行：

用 jest.fn() mock 依赖函数（如 api.deleteUser），然后断言它是否被调用、参数是否正确
若涉及 React 组件状态，配合 @testing-library/react 的 waitFor 等待异步更新完成后再断言 UI 变化
注意：测试中需 await 弹窗调用后的 Promise（例如 await handleDelete();），否则断言可能在 Promise resolve 前就执行了

当一个操作触发多个弹窗（如“确认删除”→“删除成功后弹成功提示”），可按顺序设置 mock 的返回值：

用 mockImplementationOnce 逐次返回不同 Promise：

Modal.confirm.mockImplementationOnce(() => Promise.resolve(true))<br>  .mockImplementationOnce(() => Promise.resolve());

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南