Enzyme+Jest 实现 React 组件单元测试教程

阅读时长 8 分钟读完

React 的可测试性使其成为前端开发者的首选框架之一。而 Enzyme 和 Jest 是 React 组件单元测试的两个优秀工具。本文将围绕如何使用 Enzyme 和 Jest 实现 React 组件单元测试展开讲解,详细介绍了这两个工具的使用方法和注意事项,并提供相应的示例代码,帮助读者快速上手。

什么是 Enzyme 和 Jest?

Enzyme 是一个 React UI 测试工具,它可以帮助我们方便地操作 React 组件测试中的元素。Enzyme 提供了一些渲染器,比如 Shallow Renderer、Mount Renderer 和 Static Renderer,它们可以帮助我们测试组件的不同方面,比如 props、生命周期方法和状态等。Enzyme 的优点在于其易于学习和使用,并且具有出色的性能。

Jest 是一个 JavaScript 测试框架,它可以帮助我们编写鲁棒性的测试、快速进行测试并且让测试变成开发的自动化流程的一部分。Jest 提供了许多有用的功能,如断言库、Mocking 和快照测试等等。它还自带了一个代码覆盖率工具,可以帮助我们分析测试覆盖率,并找出未测试到的代码。

如何使用 Enzyme 和 Jest 进行单元测试?

接下来,我们将介绍如何使用 Enzyme 和 Jest 进行单元测试。本文假设你已经安装了 Enzyme 和 Jest,如果没有请自行安装。

配置 Jest

我们需要在项目中安装 Jest:

然后在项目的 package.json 文件中添加以下配置:

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

这些配置使 Jest 可以正确地运行我们的测试。其中:

  • "testEnvironment": "node":在 Node.js 环境下运行测试。
  • "setupFilesAfterEnv":Jest 将在运行每个测试之前运行的 set up 文件,可以在其中设置 Enzyme。
  • "moduleNameMapper":这些选项允许我们在测试中模拟导入 CSS 和 LESS 文件。
  • "transform":这些选项允许我们在测试中使用 Babel 转换我们的代码。
  • "testRegex":这个正则表达式用于匹配测试文件,并在 Jest 运行测试时使用。
  • "moduleFileExtensions""moduleDirectories":这些选项设置模块搜索路径。

然后,在我们的 set up 文件(在上面的代码中定义为 "<rootDir>/tests/setup.js")中添加以下代码:

这段代码能够将 Enzyme 配置到我们的项目中,使我们能够使用它测试我们的组件。

编写测试用例

现在,我们准备好了编写测试用例了。在我们的项目中的 __tests__ 目录下,我们可以新建一个测试文件,比如 test/Button.test.jsx。在该文件中,我们可以开始写我们的测试用例了。

首先,导入需要的库:

然后,在该文件中编写测试用例:

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

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

在上面的测试用例中,我们测试了 Button 组件渲染是否正确、是否正确响应 onClick 事件。

运行测试

接下来,我们可以运行测试了:

Jest 将运行我们 test 目录下所有以 .test.js.spec.js 结尾的测试文件。

注意事项

最后,我们需要强调一些注意事项。

测试组件的状态

在测试组件的状态时,我们可以使用 setState 函数更改组件的状态。但需要注意的是,React 是异步更新状态的,这意味着调用 setState 后,它可能不会立即更新状态。因此,我们需要等到状态更新完成后,才能进行断言。

我们可以使用 setImmediate 函数将断言放入消息队列中,以确保等待 setState 生效:

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

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

注意使用 mount 渲染器

当我们使用 mount 渲染器时,它会渲染组件的所有子组件,这可能会导致测试变慢或者减少测试的效率。因此,在编写单元测试时,我们推荐使用 shallow 渲染器,只测试组件的当前层级。

模拟 API 请求

在有些情况下,我们需要模拟 API 请求,以测试组件的加载状态、错误状态等。我们可以使用 Mocking 功能来模拟这些请求:

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

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

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

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

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

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

在上面的测试用例中,我们使用了 fetchMock 库来模拟 API 请求。每个测试用例之间,我们需要调用 fetchMock.restore 来清洗 mock 数据。

结论

使用 Enzyme 和 Jest 进行 React 组件单元测试是一件非常方便的事情。Enzyme 为我们的测试提供了易于学习和使用的 API,而 Jest 则赋予了我们像设置 set up 文件和获取测试覆盖率的高级功能。我们编写测试用例的过程也很舒适,可以使用断言和 Mocking 来测试组件的不同方面。

希望这篇文章可以对你的前端开发工作有所帮助,通过本文介绍的内容,我们相信你已经可以更好地使用 Enzyme 和 Jest 进行 React 组件单元测试了。

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

纠错
反馈