Jest 测试 React 组件时如何 mock Redux 中的 selectors

在测试 React 组件时,通常需要 mock 掉 Redux store 和相关的 selectors。这篇文章将介绍如何使用 Jest 测试框架来 mock Redux 中的 selectors。

为什么需要 mock selectors?

Selectors 是 Redux 中的一个非常重要的概念,它们用于从 state 中获取派生数据。在组件中使用 selectors 可以帮助我们避免重复计算和提高性能。但是,在测试组件时,我们不想真正地获取到 state 中的数据,而是希望在测试中 Mock 掉这些 selectors,以便更方便地测试组件的行为。

如何 mock selectors

假设我们有一个 React 组件 MyComponent

------ - ----------- - ---- -------------

-------- ------------- -
  ----- ----- - ------------------- -- ------------
  ------ ------------------
-

该组件中使用了 Redux 的 hook useSelector 来获取 state 中的 count 值,并显示在组件中。

接下来,我们可以使用 Jest 的 jest.mock 函数来 Mock 掉 useSelector 函数:

------ - ------- ------ - ---- ------------------------
------ - ----------- - ---- -------------
------ ----------- ---- ---------------

------------------------ -- -- --
  -------------------------------------
  ------------ ----------
---

----------------------- -- -- -
  -------------- --- ------- -- -- -
    -------------------------------

    ------------------- ---

    ----- ------------ - ----------------------
    ----------------------------------------
  --
--

在这个测试中,我们使用 jest.mock 函数来 mock 掉 react-redux 模块的 useSelector 函数。然后,在测试中我们可以使用 useSelector.mockReturnValue 函数将返回值设置为 42 ,以便在渲染组件时显示。

Mock 指定模块中的 selectors

如果您的项目中有多个 Redux 模块,并且您只需要 Mock 某个模块中的 selectors,那么可以使用 Jest 的 moduleNameMapper 选项来进行选择性 Mock。

例如,假设我们有两个 Redux 模块 moduleAmoduleB,我们只需要 Mock moduleA 中的 selectors:

------ - ------- ------ - ---- ------------------------
------ - ----------- - ---- -------------
------ ----------- ---- ---------------

---------------------- -- -- --
  -----------------------------------
  ---------------- ----------
---

----------------------- -- -- -
  -------------- --- -------- ------- -- -- -
    ----- --------- - ----- ------
    --------------------------------------

    ------------------- ---

    ----- ------- - ---------------------------
    -----------------------------------
  --
--

在这个测试中,我们使用 jest.mock 函数选择性地 Mock 了 moduleA 中的 selectSomething selector。然后,在测试中我们使用 useSelector.mockReturnValue 来返回我们想要的值。

结论

在测试 React 组件时,Mock Redux 中的 selectors 是很常见的需求。使用 Jest 以及前文中提到的 jest.mock 函数可以很方便地进行 Mock,让我们能够更加轻松地编写测试代码,并且保证了单元测试的高效性和准确性。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67242d4f2e7021665e1287e4