使用 Enzyme 进行 React 组件测试,注意事项有哪些?

阅读时长 8 分钟读完

在现代 Web 开发中,React 已经成为了非常常用的一种技术,以其高效的性能和易于维护的组件化架构,使得我们能够更加轻松地开发出复杂的前端应用。不过开发好的组件也需要进行测试,毕竟前端业务的复杂度正在不断提高,我们需要保证各种情况下的正确性和稳定性。而 Enzyme 是 React 的一个测试库,它能够帮助我们在组件化开发中进行更加有效和精准的测试。

Enzyme 的基本用法

Enzyme 是由 Airbnb 前端团队开发的 React 测试库,使用它进行组件测试非常方便,它提供了类似于 jQuery 的链式调用形式,使得我们能够非常方便地进行单元测试、组件测试、集成测试等多种测试。首先,我们需要使用 npm 或者 yarn 安装 Enzyme:

然后就可以在我们的测试文件中使用 Enzyme 来对 React 组件进行测试。例如,假设我们编写了一个计数器组件:

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

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

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

现在我们想要对这个组件进行测试。首先我们需要引入 Enzyme:

然后,我们就可以使用 shallow 方法来对该组件进行测试:

上述代码以 Jest 测试框架为例,使用 shallow 方法对 <Counter> 组件进行测试,判断是否与预期 snapshot 相符。

Enzyme 测试的注意事项

Enzyme 和 Jest 配置

使用 Enzyme 进行 React 组件测试需要进行 Jest 配置。在项目根目录下新建 jest.config.js 文件,并进行相应配置:

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

setupFilesAfterEnv 中引入 Enzyme:

在测试代码中引入 Enzyme:

Enzyme 的选择器

和 jQuery 类似,Enzyme 也提供了选择器的概念,可以通过选择器来选取组件进行测试。Enzyme 支持以下三种选择器:

  • shallow:浅渲染组件,不渲染其子组件。
  • mount:完整渲染组件,包括其子组件。
  • render:渲染静态 HTML,产生一个正常的 HTML 字符串。

在实际开发中,我们推荐使用 shallowmount,因为它们能不同程度地模拟测试环境,更为接近实际业务的场景。

Enzyme 的匹配器

在测试时,Enzyme 与 Jest 配合使用,我们可以使用 Jest 的断言函数来进行测试。这种方式可以让我们进行更加精准和灵活的测试。Enzyme library 提供了如下的匹配器:

  • toBe: 精确匹配,使用 === 运算符。
  • toEqual: 深度匹配,会检查对象的所有属性和子属性是否相等。
  • toHaveLength: 匹配长度,检查 length 属性。
  • toHaveBeenCalled: 检查某个函数是否被调用过。
  • toHaveBeenCalledWith: 检查某个函数是否被给定的参数调用过。
  • toHaveProperty: 检查对象是否拥有某个特定的属性。
  • toMatchSnapshot: 检测是否与之前的快照相匹配。

使用这些匹配器,我们就能够高效地进行组件测试。

示例代码

下面是一个使用 Enzyme 测试 React 应用的完整示例代码:

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

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

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

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

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

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

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

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

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

在上述代码中,我们通过 shallow 方法来对 <Counter> 组件进行测试,包括组件的渲染、点击事件和默认值等测试。我们使用 Jest 的 toMatchSnapshot 匹配器验证了组件的 snapshot 是否与预期相符合。

结语

在现代前端开发中,测试已经成为了不可或缺的环节。Enzyme 是一个非常优秀的测试库,能够有效地帮助我们进行 React 组件的测试工作。本文介绍了 Enzyme 的基本用法以及注意事项,并提供了一个完整的测试代码示例。希望读者能够在实际开发中,通过本文的学习,更加熟练地使用 Enzyme 进行 React 组件测试。

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

纠错
反馈