React Router 是 React 中一个非常流行的库，用于实现应用程序路由功能。但是，在编写测试时，特别是针对涉及路由的组件时，你可能会遇到一些挑战。幸运的是，有一个叫做 Enzyme 的测试工具可以帮助我们轻松地解决这个问题。
安装 Enzyme
首先，我们需要安装 Enzyme。如果你已经在项目中使用了 Jest，则可以通过以下命令来安装 Enzyme：
--- ------- ---------- ------ -----------------------
接下来，我们需要一些额外的配置才能使 Enzyme 正常工作。
在项目根目录创建一个 setupTests.js 文件，并添加以下代码：
------ - --------- - ---- --------- ------ ------- ---- -------------------------- ----------- -------- --- --------- ---
这个文件将告诉 Jest 使用 Enzyme 来测试 React 组件。
测试 React Router 组件
现在我们已经安装好了 Enzyme，让我们来看看如何测试一个使用 React Router 的组件。假设我们有一个 NavBar 组件，它包含一些链接，这些链接将导航到其他页面。我们想要测试这些链接是否导航到了正确的路由路径。
-- ----------
------ ----- ---- --------
------ - ---- - ---- -------------------
----- ------ - -- -- -
------ -
-----
----
--------- -----------------------
--------- -----------------------------
--------- ---------------------------------
-----
------
--
--
------ ------- -------首先，我们需要编写一个测试用例来确保这个组件正确渲染了链接。我们可以使用 Enzyme 的 shallow 方法来渲染这个组件，并在测试用例中检查是否存在 Link 元素。
-- ---------------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- ------------
---------------- ----------- -- -- -
---------- ------ ------- -- -- -
----- ------- - --------------- ----
---------------------------------------------
---
---接下来让我们编写一个测试用例来验证这些链接是否能够正确导航到相应的路由路径。为此，我们需要附加一个内存路由器（MemoryRouter）并模拟用户导航到特定的路径。然后，我们可以通过 wrapper.find() 这个方法获取包含目标页面内容的元素，并断言它们是否正确地显示了所需的页面。
-- ---------------
------ ----- ---- --------
------ - -------- ----- - ---- ---------
------ - ------------ - ---- -------------------
------ ---- ---- ----------
------ ----- ---- -----------
------ ------- ---- -------------
------ ------ ---- ------------
---------------- ----------- -- -- -
---------- ------ ------- -- -- -
----- ------- - --------------- ----
---------------------------------------------
---
---------- -------- -- ---- ------ -- -- -
----- ------- - ------
------------- -----------------------
------- --
---------------
--
-------------------------------------------
---
---------- -------- -- ----- ------ -- -- -
----- ------- - ------
------------- ----------------------------
------- --
---------------
--
--------------------------------------------
---
---------- -------- -- ------- ------ -- -- -
----- ------- - ------
------------- ------------------------------
------- --
---------------
--
----------------------------------------------
---
---总结
测试 React Router 相关组件对于保证代码质量至关重要，Enzyme 提供了一种简单的方法来实现相关测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65c1c0a4add4f0e0ffbc1676