Jest 测试 React 组件，如何 mock props？
在前端开发中，Jest 是一个非常常用的测试框架，而 React 组件的测试也是前端开发必不可少的一部分。在测试 React 组件时，我们常常会遇到需要 mock props 的情况，如何进行正确的 mock props 是我们需要掌握的技术。
本文将通过详细的代码示例，介绍如何在 Jest 中 mock props。
首先，在组件测试中，我们需要引入@testing-library/react和@testing-library/jest-dom/extend-expect这两个包，它们将为我们提供一些方法，来简化组件的测试。
以一个简单的负责展示用户信息的组件为例：
-- -------------------- ---- -------
------ ----- ---- -------
------ --------- ---- ------------
----- -------- - -- ----- ---- ------- -- -- -
-----
-------- ----------
------- ---------
----------- -------------
------
-
------------------ - -
----- ----------------------------
---- ----------------------------
-------- ----------------------------
-
------ ------- --------在测试这个组件时，我们可以通过传递 props，判断组件是否能够正确的渲染出来。那么如何进行 props 的 mock 呢？
我们可以使用jest.fn()来创建 Mock 函数，并将其传递给组件的 props。
假设我们需要 mock 的 props 是name和address，则可以将其写成这样的形式：
-- -------------------- ---- -------
------ - ------ - ---- ------------------------
------ -----------------------------------------
------ -------- ---- ------------
------------------ ----------- -- -- -
----------- ----------- -- -- -
----- -------- - ---------
----- ----------- - ---------
-------
---------
---------------
--------
---------------------
--
-
-----------------------------------------
--------------------------------------------
--
--上面的代码中，我们使用jest.fn()函数来创建两个 Mock 函数mockName和mockAddress，然后将它们传递给了组件的 props。
最后，我们使用expect()断言，判断这两个 Mock 函数被正确地调用了一次。
需要注意的是，在实际的开发过程中，可能会遇到更加复杂的情况。
比如，在使用useEffect等 React 生命周期方法时，可能需要 Mock 外部的函数或服务，以测试组件的正确性。
此时，我们可以使用jest.mock()函数来 Mock 外部函数或服务。
以一个通过服务获取用户信息的组件为例：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- -------
------ ----------- ---- -------------------------
----- -------- - -- ------ -- -- -
----- ------ -------- - --------------
------------ -- -
----------------------------------------- -- -
-------------
--
-- ---------
------ -
-----
-----
- -
-----
-------- ---------------
------- --------------
----------- ------------------
------
-
- -----------------
-
------
-
-
------ ------- --------在测试这个组件时，我们可以使用jest.mock()来 Mock 组件中的外部服务。
-- -------------------- ---- -------
------ - ------ - ---- ------------------------
------ -----------------------------------------
------ -------- ---- ------------
------ ----------- ---- -------------------------
------------------------------------
------------------ ----------- -- -- -
----------- ----------- ----- -- -- -
----- -------- - -
----- -------
---- ---
-------- ----- ---------
-
-------------------------------------------------------
----- - --------- - - ---------------- ---------- ---
--------------------------------------------------------
-------------------------------------------------------
----------------------- ---------------------------
---------------------- -------------------------
-------------------------- ---- ------------------------------
--
--上面的代码中，我们使用jest.mock()函数，Mock 了userService.getUserById()这个服务。
我们使用getUserById.mockResolvedValueOnce()来模拟服务返回的数据，在测试过程中，让组件调用这个模拟函数。
最后，我们使用getByText()等函数，来检查组件中渲染出的内容是否正确。
总结：
在前端开发中，正确的测试方法和工具，能够提高开发效率，减少代码错误。本文通过示例代码，介绍了如何在 Jest 中 mock props，以及如何 Mock 外部函数和服务。掌握这些技能，能够帮助我们更加准确地测试组件，提升代码质量，避免潜在的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645df247968c7c53b004dd48