Enzyme 测试中如何模拟使用 Router 的组件
前言
在前端开发中，组件化开发已经到了一个非常成熟的阶段。但是，由于组件的复杂性可能会给测试带来一些挑战。在这里，我们将深入探讨使用 Enzyme 测试库来测试具有路由器（Router）的组件。
一、Enzyme 测试库
Enzyme 是一个流行的 React 测试库，它具有以下三种不同的测试集合：
- shallow：在单元测试中使用，这更侧重于测试 React 组件的行为而不涉及其子组件。
- mount：在集成测试中使用，这种类型的测试更为完整地渲染 React 组件及其子组件，并且调用所有生命周期方法。
- render：在静态分析或 UI 状态展示上使用，这种测试仅仅将渲染结果作为静态 HTML 字符串返回。
Enzyme 的 API 非常类似于 jQuery，提供了许多 DOM 操作和查询方法，这使得它变得非常容易使用。
二、什么是 React Router？
React Router 是一个第三方库，它可以很容易地在 React 中实现路由机制。它主要用于开发单页面应用程序（SPA）。
由于它是一个第三方库，因此我们必须将其安装并导入到我们的 React 应用程序中，如果你还没有安装过 React Router，可以通过以下命令行进行安装：
--- - -- ----------------
三、使用 Enzyme 测试 Router 组件
在这个章节中，我们将详细介绍如何使用 Enzyme 来测试带有 Router 组件的 React 组件。
- 首先，让我们看一个非常简单的带有 Router 的 React 组件：
------ ----- ---- --------
------ - ----- ------ ------ - ---- -------------------
----- ----- - -- -- ---------------
----- --- - -- -- -
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
--------
------ --------------
------ --
--------
------ ---------
-------------
--------
---------
------
--
------ ------- ----App 组件包含了一个导航栏和一组路由，分别为“/”和“/about”。
- 接下来，我们需要安装两个额外的库来进行测试：jest 和 enzyme-to-json。
我们可以使用以下命令进行安装：
--- - ---------- ---- ------ --------------
其中 jest 是我们的测试套件，enzyme 是 React 的测试库，而 enzyme-to-json 是一个辅助工具，可以将 enzyme 包装器渲染为可序列化的 JSON 输出。
- 为了测试 App 组件，我们需要编写以下测试用例：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------------
------ --- ---- --------
-------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - ------------ ----
------------------------------------------
---
------------ - --- ------- -- -- -
----- ------- - ------------ ----
------------------------ ------------------------
---
------------ - ---- --- ---- ------ -- -- -
----- ------- - ------------ ----
------------------------------------------------------
---
---- 我们首先使用 shallow 来渲染组件，然后使用 toJson 来序列化输出，并比较结果（toMatchSnapshot）来确保我们没有破坏渲染结果。
- 第二个测试用例是检查导航栏中是否有两个链接（"Home" 和 "About"）。
- 第三个测试用例是确保 Home 组件被正确渲染。
- 我们还可以模拟点击导航栏链接以测试路由是否工作。
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------------
------ --- ---- --------
-------------- ---- -- -- -
----------- ----------- -- -- -
----- ------- - ------------ ----
------------------------------------------
---
------------ - --- ------- -- -- -
----- ------- - ------------ ----
------------------------ ------------------------
---
------------ - ---- --- ---- ------ -- -- -
----- ------- - ------------ ----
------------------------------------------------------
---
------------- -- --- ----- ------ -- -- -
----- ------- - ------------ ----
----------------- ------------------------------ - ------- - ---
-------------------------------------------------------
---
---- 我们返回到我们的测试，尝试点击导航栏的“About”链接。
- 我们可以使用 simulate 方法来模拟用户点击事件，这次我们将通过传递事件来模拟左键单击。
- 然后，我们检查渲染结果以查看“About”页面是否正确呈现。
四、结论
本文中我们详细介绍了如何使用 Enzyme 测试库来测试具有 Router 的 React 组件。
在编写测试代码之前，我们首先安装了必要的库，即 jest，enzyme 和 enzyme-to-json。接下来，我们编写了多个测试用例来了解路由和组件如何互动。
最后，我们还使用 Enzyme 通过模拟用户事件点击链接，测试路由是否正常工作。到此，我们已经成功地使用 Enzyme 完成了测试工作。
五、参考
- Enzyme - https://enzymejs.github.io/enzyme/
- React Router - https://reactrouter.com/
- Jest - https://jestjs.io/
- Enzyme-to-JSON - https://www.npmjs.com/package/enzyme-to-json
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670d555a5f551281025ce5fd