在测试 React 组件时，通常需要 mock 掉 Redux store 和相关的 selectors。这篇文章将介绍如何使用 Jest 测试框架来 mock Redux 中的 selectors。
为什么需要 mock selectors？
Selectors 是 Redux 中的一个非常重要的概念，它们用于从 state 中获取派生数据。在组件中使用 selectors 可以帮助我们避免重复计算和提高性能。但是，在测试组件时，我们不想真正地获取到 state 中的数据，而是希望在测试中 Mock 掉这些 selectors，以便更方便地测试组件的行为。
如何 mock selectors
假设我们有一个 React 组件 MyComponent：
import { useSelector } from 'react-redux'
function MyComponent() {
const count = useSelector((state) => state.count)
return <div>{count}</div>
}该组件中使用了 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 模块 moduleA 和 moduleB，我们只需要 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