Jest 测试 React 组件，如何 mock props？-JavaScript中文网-JavaScript教程资源分享门户

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