React 测试指南：使用 Enzyme 进行 Redux 同步异步组件测试

如果你是一名前端开发人员，那么你一定了解 React 这款非常流行的前端 UI 框架。但是在开发的过程中，测试是一个非常关键的环节。作为一名优秀的前端开发人员，我们需要保证我们开发的组件和应用程序都是具有高质量的。那么，我们如何测试我们的 React 组件呢？这篇文章将为你提供一个 React 测试指南，并教你如何使用 Enzyme 进行 Redux 同步异步组件测试。

React 测试基础知识

在开始之前，我们先来了解一些基本 React 测试知识。

测试类型

React 测试可以分为两类：单元测试和集成测试。单元测试是指对 React 组件的每个小模块进行测试，而集成测试则是测试整个应用程序或者系统。

测试工具

React 测试工具有很多，常见的有 Jest、Enzyme、React Testing Library 等。其中，Jest 是一个非常流行的测试框架，而 Enzyme 则是一个专门用来测试 React 组件的工具，基于 jQuery 的风格封装了 React 组件的渲染、断言、操作等功能。

测试方法

在 React 测试中，我们主要使用以下的测试方法：

渲染测试：测试组件是否能够正常渲染；
交互测试：测试组件是否能够正常响应用户的交互事件；
快照测试：测试组件是否在不同状态下保持一致。

Enzyme 入门

在开始测试 React 组件之前，我们需要先了解一下 Enzyme。Enzyme 是由 Airbnb 开发并维护的一个用于测试 React 组件的 JavaScript 工具。它提供了一套 jQuery 风格的 API，使得测试 React 组件变得非常简单和直观。使用 Enzyme，我们可以轻松地模拟组件内部状态或者属性的变化，同时也可以进行组件的断言和操作。

Enzyme 主要有三种渲染方式：mount、shallow 和 render。其中，mount 渲染出完整的组件结构，会让 React 组件完整地执行生命周期、事件、数据更新等操作；shallow 只渲染组件最外层，不会进行子组件的渲染，提供了一种较快的测试组件的方法；而 render 类似于一个静态转换器，不支持孩子节点操作，但很适合创建静态 HTML 和测试组件。

Enzyme 测试 Redux 同步组件

在使用 Enzyme 测试 React 组件时，我们会遇到许多测试场景。下面我们将通过一个示例测试 Redux 同步组件。

准备工作

在开始测试之前，我们需要先安装依赖包：Enzyme、enzyme-adapter-react-16 和 redux-mock-store。其中，Enzyme 和 enzyme-adapter-react-16 是 Enzyme 的必要依赖包，而 redux-mock-store 是我们测试 Redux 组件时需要用到的一个中间件。

npm install --save-dev enzyme enzyme-adapter-react-16 redux-mock-store

在这里，我们要使用的是 Enzyme 的 shallow 方法来浅渲染组件，并且使用 redux-mock-store 来模拟 store 的数据。因此，我们需要在创建 Enzyme 实例时，指定 enzyme-adapter-react-16 适配器。我们可以在 setupTests.js 文件中进行配置。

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

编写测试用例

下面我们来编写一个测试用例，测试一个 Redux 同步组件。

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

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

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

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

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

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

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

在这里，我们首先导入了需要使用的依赖包。接下来，我们创建了一个 redux-mock-store 的实例，用来模拟 store 的数据，并且创建了一个 Counter 组件的实例。其中，wrapper = shallow(<counter>) 用 shallow 方法来浅渲染组件，并将模拟的 store 传递给 Counter 组件。

在运行测试之前，我们需要调用 dive 方法，用来访问 Counter 组件的内部。原因是因为我们使用了 connect 方法将组件连接到 store 上，如果不使用 dive 方法，那么找到的是一个连接了 store 上的组件，而不是我们实际编写的 Counter 组件。最后，我们在测试用例中编写了三个测试断言，用来测试组件是否正常渲染、是否成功渲染出 counter 值和是否在按钮点击时成功更新 counter 的值。

Enzyme 测试 Redux 异步组件

在测试 Redux 异步组件之前，我们需要先了解一下 Redux 异步加载数据的一般流程。

定义并绑定 actionType、actionCreator；
编写 redux-thunk 中间件获取数据并 dispatch 获取的数据；
定义 reducer 来更新 state。

准备工作

在开始测试之前，我们需要先安装依赖包：redux-thunk。然后，我们需要创建 mockStore，并且安装 redux-mock-store 和 fetch-mock-node。fetch-mock-node 是一个用于模拟 fetch 的 Node.js 插件。在这里，我们需要 mock fetch 请求，以便测试组件的正确性。我们先来安装依赖包。

npm install --save-dev redux-thunk redux-mock-store fetch-mock-node

创建 Enzyme 实例时，我们同样需要在 setupTests.js 文件中进行配置。

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

编写测试用例

下面我们来编写一个测试用例，测试一个 Redux 异步组件。我们使用 redux-thunk 获取数据，然后通过 dispatch 更新到 store 中，最后测试组件是否正常渲染获取到的数据。

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

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

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

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

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

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

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

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

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

在这里，我们首先导入了需要使用的依赖包，包括 redux-thunk、redux-mock-store 和 fetch-mock-node。然后，我们创建了一个 redux-mock-store 的实例，并且模拟了返回的 userList 数据。在 beforeEach 块中，我们使用 shallow 方法来浅渲染组件，并将模拟的 store 传递给 UserList 组件。同时，我们使用 fetchMock.mock(url, userList) 模拟了一个异步请求。

在测试用例中编写了两个测试断言。首先，我们测试是否成功渲染出 "Loading..." 消息，表示数据正在请求中。接着，我们使用 store.dispatch({ type: 'FETCH_USERS', payload: { url } }) 异步获取数据，并通过 wrapper.update() 更新组件。最后，我们测试是否成功渲染出 userList 列表，并检查列表项中是否包含正确的数据。

总结

React 测试是前端开发过程中的一个重要环节。在实际开发中，我们可以使用 Enzyme 来测试我们的 React 组件。本文介绍了 Enzyme 的使用方法，并提供了一个基于 Enzyme 的 Redux 同步和异步组件测试示例。随着 React 的普及，React 测试将越来越重要。我们期待你通过本文，掌握 React 测试的基础知识，并在实践中发现更多测试技巧。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6497d6c748841e98944dd02c