在开发 React 应用时，我们经常会遇到需要访问 window 对象的情况，比如需要在组件中集成第三方库或者使用浏览器 API，这时候如果我们要对组件进行单元测试，就需要模拟 window 对象才能正确地测试组件。那么在 Jest 测试 React 组件时，如何模拟 window 对象呢？下面就来详细讲解一下。
Jest 测试工具简介
Jest 是一个开源 JavaScript 测试框架，由 Facebook 开发，用于测试代码的正确性和性能。它集成了断言、模拟和覆盖率报告等功能，可以轻松地进行单元测试、集成测试等多种测试，尤其适用于测试 React 应用。使用 Jest 进行测试需要安装相应的依赖包，其中最重要的是 jest、react-test-renderer 和 enzyme，下面介绍一下它们的功能和用法。
jest：Jest 的核心库，提供测试框架和几乎所有的生态工具。react-test-renderer：提供 React 组件的“渲染器”，用于将组件渲染为普通 JavaScript 对象，便于进行断言和比较。enzyme：提供了一些测试 React 组件的实用工具，可以方便地模拟事件、测试组件生命周期、断言渲染结果等。
模拟 window 对象的方法
在 Jest 中模拟 window 对象，可以使用 jest.fn() 方法和 Object.defineProperty() 方法，它们分别对应着两种不同的模拟方式。
Jest.fn() 方法
jest.fn() 方法用于创建一个 Jest 模拟函数，可以对它进行调用、断言和查看它的调用次数和调用参数等信息。在测试 React 组件时，我们可以使用 jest.fn() 方法来模拟 window 对象的属性和方法，比如下面代码中的 scrollTo() 方法：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
----- ----------- ------- --------------- -
----------- - -- -- -
------------------ ---
--
-------- -
------ -
------- ---------------------------
------ -- ---
---------
--
-
-
------ ------- -------------- -------------------- ---- -------
-- -------------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
--- -------------
------------ -- -
------------ - ----------
--------------- - -------------
---
----------- -- -
------------------------------
---
---------- ------ -- --- ---- ----- -------- -- -- -
----- ------- - -------------------- ----
-----------------------------------------
-------------------------------------------- ---
---
---在上面的测试代码中，我们先使用 jest.fn() 方法创建一个 Jest 模拟函数 mockScrollTo，然后把它赋值给 window 对象的 scrollTo 属性，这样在测试 MyComponent 组件时就可以模拟 window.scrollTo() 方法的调用，并断言它是否被正确地调用。
Object.defineProperty() 方法
Object.defineProperty() 方法用于在 JavaScript 对象上定义新属性或修改现有属性的特性，包括值、可枚举性、可配置性和可写性等。在测试 React 组件时，我们可以使用 Object.defineProperty() 方法来模拟 window 对象的属性和方法，比如下面代码中的 innerWidth 属性：
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
----- ----------- ------- --------------- -
----- - -
------ ------------------
--
------------ - -- -- -
--------------- ------ ----------------- ---
--
------------------- -
--------------------------------- -------------------
-
---------------------- -
------------------------------------ -------------------
-
-------- -
------ -
-----
------ ------ ----- -- ------------------------
------
--
-
-
------ ------- -------------- -------------------- ---- -------
-- -------------------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
--- --------------
------------ -- -
------------- - ------------------
----------------------------- ------------- -
--------- -----
------------- -----
------ ----
---
---
----------- -- -
----------------------------- ------------- -
--------- -----
------------- -----
------ --------------
---
---
---------- ---- --- ------- ------ ------- -- -- -
----- ------- - ------------------ ----
--------------------------------------------- ------ ----- -- --------
----------------- - ----
------------------------ -----------------
--------------------------------------------- ------ ----- -- --------
---
---在上面的测试代码中，我们先保存一下原始的 window.innerWidth 属性，并使用 Object.defineProperty() 方法把它重写为 500，这样在测试 MyComponent 组件时就可以模拟 window.innerWidth 属性的值。在测试中，我们通过模拟 window.dispatchEvent() 方法来触发 resize 事件，从而测试组件是否正确地响应了 window 的宽度变化。
总结
通过上面的介绍，相信你已经学会了在 Jest 测试 React 组件时如何模拟 window 对象的方法，包括使用 jest.fn() 方法和 Object.defineProperty() 方法，并完成了相应的测试代码。这个技巧不仅能够帮助你提高 React 组件的测试覆盖率和准确性，还能够让你更深入地理解和掌握 Jest 和 React 的使用和原理。不断学习和实践，才能成为一名优秀的前端工程师。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f8c7c980a9b385b8fb751