使用 Enzyme 测试 Redux 中的 React 组件-JavaScript中文网-JavaScript教程资源分享门户

使用 Enzyme 测试 Redux 中的 React 组件

随着 React 的流行，Redux 已经成为了管理应用程序状态的标准。在开发期间，我们需要确保我们编写的代码具有正确的行为并能正确显示应用程序的状态。由于应用程序对 Redux 的依赖，因此在开发应用程序时也需要判断应用程序组件的功能是否正确。为了帮助我们测试 Redux 中的 React 组件，我们可以使用 Enzyme 进行单元测试。

什么是 Enzyme？

Enzyme 是一个帮助我们在 React 应用程序中进行单元测试的 JavaScript 库。Enzyme 提供了几个函数，用于测试 Vue 组件。这些函数可以帮助我们测试组件的渲染，状态和事件处理等方面。Enzyme 由 Airbnb 开发，并且拥有广泛的社区支持。

安装 Enzyme

在使用 Enzyme 之前，我们需要先安装它。我们可以使用 npm 安装 Enzyme。

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

在组件测试中使用 Enzyme

接下来，我们将使用 Enzyme 来测试 Redux 中的 React 组件。在此之前，让我们创建一个简单的 Redux 应用，并为之设置一些简单的组件来进行测试。

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

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

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

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

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

在此代码中，我们创建了一个名为 ExampleComponent 的简单 React 组件。此组件将从 Redux 应用程序的状态中获取 name 属性并渲染到屏幕上。该组件包含一个 propTypes，它确定 name 是否为必需属性。此外，该组件还将连接一个 Redux store，以便在需要时从中获取应用程序状态。

创建测试用例

现在我们已经创建了组件，接下来我们将编写测试用例以确保组件的行为时正确的。我们可以在 __tests__ 文件夹中创建一个新文件来放置我们的测试用例。

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

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

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

在上面的代码中，我们导入 ExampleComponent 和 shallow 函数。这里我们使用 shallow 函数来测试组件，因为它只渲染组件的层次结构，而不需要真正的 DOM 元素。因此，它会更快，减少了测试所需的资源。

接下来，我们使用 describe 函数来描述我们要编写的测试用例。我们编写了两个测试用例，它们分别测试了组件的行为。

在第一个测试用例中，我们创建一个 name 属性，并将其传递到 ExampleComponent 组件。我们使用 shallow 函数来渲染组件的层次结构，并查找 DOM 中的 div 元素。最后, 我们使用 expect 和 toEqual 函数来测试渲染的值是否正确。

在第二个测试用例中, 我们 mock 了 console.error() 方法以便在测试 Props 需要的信息时能输出更加详细的错误信息。我们查找 DOM 中的 div 元素，但没有传递 name 属性，这样组件将引发错误。因此，我们使用 expect 和 toHaveBeenCalled 函数来测试正常情况下组件是否会引发错误。

启动测试

测试用例的编写完成后，我们就可以使用 npm test 命令来启动测试了。在启动测试过程中，Enzyme 会在浏览器中加载你的应用程序，同时执行测试用例集。

在你编写测试用例之前，你需要确保你的应用程序组件正常工作。否则，在检查测试有效性时，无法确定问题是否在测试用例中。

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

我们可以看到测试用例已经全部通过，此时组件已经可以正常工作了。

结论

Enzyme 是一个非常有用的 JavaScript 库，可以帮助我们在 React 应用程序中进行单元测试。通过上面的介绍, 你应该了解了如何用它来测试 Redux 中的 React 组件。测试不仅可以确保我们的组件行为在开发中正确，而且还有助于我们更好地了解应用程序状态，并帮助我们一旦发现问题，能及时进行修复。始终记住，好的测试用例是代码质量的基石。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/66efd2426fbf96019730f9e6