使用 Enzyme 测试 React 组件中的 Redux 的 state

阅读时长 6 分钟读完

在 React 应用中,Redux 已经成为了管理状态的主流解决方案。为了保证代码的可靠性,我们需要对 Redux 中的 state 进行测试。在本文中,我们将介绍如何使用 Enzyme 来测试 React 组件中的 Redux 的 state,包括如何设置 store、获取和修改 state,以及如何模拟 Redux 的 action。

什么是 Enzyme?

Enzyme 是一个由 Airbnb 开发的 React 组件测试库,它提供了一套简单且易用的 API,用于测试组件的输出、渲染和交互等方面。Enzyme 将 React 组件封装在浅层渲染器(shallow renderer)中,从而使测试变得简单高效。

设置 Redux 的 store

在使用 Enzyme 测试 React 组件中的 Redux 的 state 之前,我们需要先创建一个 Redux 的 store。可以采用 createStore 函数创建一个空的 store,或者使用 Redux 的应用程序状态初始值(initialState)创建 store。在测试文件中,我们可以在 beforeEach 块中创建 store,并将其传递给组件作为属性。以下是一个例子:

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

--- ------

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

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

在上面的代码中,我们创建了一个名为 store 的 Redux store,并将其传递给 Counter 组件作为属性。请注意,在创建 store 和渲染组件之前,我们需要在测试用例中包装组件,使用 Provider 包裹组件,并将 store 作为 store 属性的值传递给 Provider 组件。

获取和修改 state

我们可以通过 store 的 getState() 方法来获取当前的 Redux state。在组件的测试中,我们需要获取、修改,甚至模拟 Redux state,以模拟 interaction。以下是一个 Counter 组件的测试用例:

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

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

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

在上面的代码中,我们模拟了两种场景:counter 增加和 counter 减少。我们首先获取使用 store 的 getState() 方法获取当前的 count 值,然后模拟用户点击 increment 或 decrement 按钮,并使用 expect() 方法来测试是否按预期增加或减少了 count 值。

模拟 Redux 的 action

我们还可以使用 Enzyme 来模拟 Redux 的 action,并测试 state 是否按照预期修改。React-Redux 库提供了 shallowWithStore 函数来测试 Redux 中的 action。以下是一个例子:

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

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

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

在上面的代码中,我们创建了一个带有 increment 函数的 props 对象,并将其作为 Counter 组件的属性传递。然后,我们使用 shallowWithStore 包装 Counter 组件,并模拟用户点击 increment 按钮,验证 increment() 函数是否被调用,以及调用时是否按照预期增加了 count 值。

总结

在本文中,我们介绍了如何使用 Enzyme 来测试 React 组件中的 Redux 的 state,包括如何设置 store、获取和修改 state,以及如何模拟 Redux 的 action。在编写测试代码时,请注意保持测试的简洁性和高效性,并遵循最佳实践,以获得更好的测试覆盖率和可靠性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65b7719aadd4f0e0fffffff6

纠错
反馈