单元测试是每个前端应用程序开发人员的必备技能。它可以帮助捕捉到潜在的问题、提供可靠的反馈以及加快迭代速度。当涉及到 Redux 应用程序时，使用 Enzyme 作为测试工具可以更好地管理测试，更好地组织测试套件，使我们可以更好地测试。这篇文章将介绍如何使用 Enzyme 测试 Redux 应用程序。

Enzyme 的使用

Enzyme 是一个 React UI 测试工具，它使用了类似 jQuery 的选择器语法。它可以让我们轻松地渲染组件和断言组件行为的输出，并可以很容易地模拟用户交互。

在 redux-storage-merger 示例项目中的测试 $\texttt{github.com}\slash \texttt{asfktz}\slash \texttt{redux-storage-merger}$，你会看到如下的代码片段：

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

之前的单元测试使用expect 断言了 reducer 返回结果是否合法。

然后就可以使用 Enzyme 的浅渲染(Shallow Rendering)测试：

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

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

在 React-Redux 应用中使用 Enzyme

在 React-Redux 应用中使用 Enzyme 进行测试，可以使用 React-Redux 库中提供的Provider组件提供"store"数据，在 Enzyme 测试组件中快速地渲染 Redux 容器。首先，让我们看一下使用 Provider 组件的代码：

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

这段代码使用了 Provider 组件，它接受一个 Redux store 对象作为 prop。它使得 Redux 中数据的最上低层 Components 可以通过connect方法分发store数据。

当使用 Enzyme 测试 React-Redux 应用程序时，需要使用 Provider 组件，并将 store 注入到组件中。我们会看一下示例中的代码。

这是一个简单的 Redux 容器：

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

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

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

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

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

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

我们可以稍稍修改代码来使用 Enzyme 进行测试：

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

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

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

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

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

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

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

这个代码示例包含了一个使用 redux-mock-store 的测试。redux-mock-store 是一个可以用来模拟 Redux store 的库，用在我们需要测试异步行为，或者获取异步数据的时候。

Enzyme 的安装和配置

Enzyme 可以通过 NPM 以及 Yarn 安装。

在React版本15以上的应用中，请确保安装了 enzyme-adapter-react-15 或 enzyme-adapter-react-16 两者之一以确保兼容性。

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

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

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

安装并配置了 Enzyme 后，你就可以愉快地使用 React-Redux 应用程序了。熟悉 Enzyme 的开发者可能要熟练使用 Enzyme 的API 和接口，以更好地使用这个库来测试 React-Redux 应用程序。

结论

Enzyme 是一个强大而又灵活的 React UI 测试工具。对于 React-Redux 应用程序的测试，使用 Enzyme 来帮助测试、调试、定位问题，是一种不错的选择。以适当的适配器设置，安装 Enzyme，编写测试代码并进行单元测试。现在，您对 Enzyme 是如何使用以及为什么常常被建议使用它来测试 Redux 应用程序有了一个更好的了解。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/670f2de75f55128102632dc3

编写更好的单元测试：使用 Enzyme 测试 Redux 应用

Enzyme 的使用

在 React-Redux 应用中使用 Enzyme

Enzyme 的安装和配置

结论