如何处理 Enzyme 测试中引用 Redux 的问题？
在 React 应用中使用 Redux 是常见的模式之一。然而，在编写测试时，Redux 的引入会带来一些挑战。
Enzyme 是 React 的一种测试工具，它可以方便地模拟组件的 DOM，并在现实环境中测试组件行为。当我们引入 Redux 时，我们需要在测试中模拟 Redux 的 store，以便组件能够正确地和 store 交互并渲染出正确的内容。
下面是一些处理 Enzyme 测试中引用 Redux 中的问题的建议：
- 使用 react-redux 提供的 Provider：
在应用中，我们使用 react-redux 的 <provider> 组件将组件和 Redux 的 store 相关联。在测试中，我们可以通过在测试文件中创建 store 对象并使用 <provider> 组件将其包裹，从而使组件可以在测试中访问 store。
现实情况下，我们可能需要根据不同的测试情况，提供不同的 state。这时候，我们可以将 store 的创建放在 beforeEach 函数中，并且在测试之前更新 store 中的 state。
示例代码如下：
-- -------------------- ---- ------- ------ - -------- - ---- -------------- ------ -------------- ---- ------------------- ------ - ----- - ---- --------- ----- --------- - ----------------- ----------------------- -- -- - --- ------ ------------- -- - ----- - ----------- ---------- - ---- ----- - --- --- ---------- ------ ----------- -- -- - ----- ------- - ------ --------- -------------- ------------ -- ----------- -- -- ------- --- ---------- ------ ----- ------- ----------- -- -- - ---------------- ----- ------------- --- ----- ------- - ------ --------- -------------- ------------ -- ----------- -- -- ------- --- ---展开代码
- 使用 redux-mock-store 模拟 store：
redux-mock-store 是一个用于模拟 Redux store 的库。与手动创建 store 不同，使用 redux-mock-store 可以更轻松地模拟一些 Redux 的行为，例如处理异步操作等。
示例代码如下：
-- -------------------- ---- ------- ------ -------------- ---- ------------------- ------ - ----- - ---- --------- ----- --------- - ----------------- ----------------------- -- -- - --- ------ ------------- -- - ----- - ----------- ---------- - ---- ----- - --- --- ---------- ------ ----------- -- -- - ----- ------- - ------ ------------ ------------- -- -- -- ------- --- ---------- ------ ----- ------- ----------- -- -- - ---------------- ----- ------------- --- ----- ------- - ------ ------------ ------------- -- -- -- ------- --- ---展开代码
在这个示例中，我们将 store 对象传递给了 <mycomponent> 组件，以便组件可以访问 Redux store。这种方法的缺点是：我们需要将 store 作为组件的 prop 传递，这可能会在代码中引入一定的混淆。
在处理 Enzyme 测试中使用 Redux 时，我们需要确保测试的正确性和可读性。通过使用 react-redux 的 <provider> 组件或 redux-mock-store，我们可以更轻松地创建和管理 Redux store，并使用 Enzyme 来测试 Redux 相关组件的行为，以便更好的保证测试结果的准确性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c4f4dc6e1fc40e36e1aca2
