如何在 Enzyme 中 Mock Redux store 中的 initialState
在前端开发中，Redux 是一个非常流行的状态管理工具。当我们使用 React 应用程序时，我们通常会使用 Enzyme 进行测试。在测试 React 组件时，有时我们需要 Mock Redux store 的 initialState。本文将介绍如何在 Enzyme 中 Mock Redux store 中的 initialState。
Mock Redux store 的 initialState
在使用 Enzyme 进行组件测试时，我们通常需要使用 Mock Redux store 的 initialState。这是因为在测试 React 组件时，我们需要确保组件的状态正确地反映了 Redux store 中的状态。以下是一个示例 initialState：
const initialState = {
todos: [
{ id: 1, text: 'Buy milk', completed: false },
{ id: 2, text: 'Take out the trash', completed: true },
],
};在上面的示例中，我们有一个包含两个 todo 的 initialState。现在，我们将介绍如何在 Enzyme 中 Mock 这个 initialState。
在 Enzyme 中 Mock Redux store 的 initialState
我们可以使用 redux-mock-store 库来 Mock Redux store 的 initialState。该库提供了一个 MockStore 类，该类可以模拟 Redux store。以下是一个示例：
-- -------------------- ---- -------
------ ------------------ ---- -------------------
------ ----- ---- --------------
----- ----------- - --------
----- --------- - --------------------------------
----- ------------ - -
------ -
- --- -- ----- ---- ------ ---------- ----- --
- --- -- ----- ----- --- --- ------- ---------- ---- --
--
--
----- ----- - ------------------------在上面的示例中，我们使用 configureMockStore 函数创建了一个 MockStore 类。我们还为该类提供了 Redux store 中的 initialState。现在，我们可以在 Enzyme 中使用该 store：
-- -------------------- ---- -------
------ - ------- - ---- ---------
------ ----- ---- --------
------ -------- ---- -------------
------------------- ---- -- -- -
----------- --- ---- ------ -- -- -
----- ------- - ----------------- --- - -------- - ----- - ---
----------------------------------
---
---在上面的示例中，我们使用 shallow 函数创建了一个 TodoList 组件的浅渲染。我们还为该函数提供了 store。现在，我们可以测试该组件是否正确地反映了 Redux store 中的状态。
结论
在本文中，我们介绍了如何在 Enzyme 中 Mock Redux store 中的 initialState。我们使用 redux-mock-store 库创建了一个 MockStore 类，该类可以模拟 Redux store。我们还演示了如何在 Enzyme 中使用该 store 进行组件测试。现在，您可以在自己的项目中使用这些技术来测试 React 组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673f38c65ade33eb722ea128