Enzyme 是 React 生态系统中最受欢迎的测试工具之一，它可以用于测试 React 组件的行为和渲染结果。在实际开发中，我们经常需要测试需要用户操作确认的功能，例如删除操作时需要弹出 confirm 框，而这种情况在测试中经常会出现问题。那么，在 Enzyme 测试中如何测试 confirm 框呢？
方式一：重写 window.confirm
confirm 是 window 对象的一个方法，我们可以通过重写它来模拟用户的操作行为，从而测试 confirm 功能。
-- -------------- --------------
--------------------- - ---------- -- ------
------------------------- -- -- -
---------- ------- ------ ---- ----- ------ -------- -- -- -
----- ------- - ------------------------
-----------------------------------------
--------------------------------------------------------- --- --------
--------------------------------------------------------- --- ------- -------- ---- ----------
-------------------------------------------------------
------------------
---
---以上代码中，我们首先在全局范围内重写了 window.confirm 方法，将其指向 jest.fn。在测试 ConfirmDialog 组件中，当用户点击删除按钮时，我们将判断是否弹出了弹窗，并验证弹窗中的文本内容是否符合预期。最后，我们也应该验证 window.confirm 方法是否被正确的调用。
方式二：使用一个 stub 方法
如果直接重写 window.confirm，可能会影响到其他测试场景，这时候我们可以使用一个 stub 方法来替代 window.confirm 方法。
------------------------- -- -- -
---------- ------- ------ ---- ----- ------ -------- -- -- -
----- ---- - ----------
-------------- - -------------------------------
----- ------- - ------------------------
-----------------------------------------
--------------------------------------------------------- --- --------
--------------------------------------------------------- --- ------- -------- ---- ----------
--------------------------------------
------------------
---
---在这种方式中，我们首先创建了一个 stub 方法，然后将 window.confirm 方法重写为该 stub 方法。最后在测试中，我们验证应该弹出 confirm 框的场景是否正确，并验证 stub 方法是否被正确的调用。
总结
在本文中，我们介绍了两种测试 confirm 框的实现方式，无论使用哪种方式，在测试时我们应该严格验证用户操作行为和验证确认框是否弹出，这样才能保证测试结果的准确性和可靠性。同时，我们也应该充分利用好 Enzyme 的优势，写出更简洁和有效的测试代码，提高代码质量和可维护性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654985597d4982a6eb3b76bd