在测试 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 模块 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