随着 React 越来越流行，大量的前端开发者开始使用它来开发单页面应用程序。在多数情况下，这意味着您需要在 React 组件中实现路由，以导航页面并组织应用程序的 UI 等元素。然而，测试一个带有路由的 React 组件可能会使您陷入麻烦。在本文中，我们将讨论如何在 Enzyme 中测试 React 组件中的路由。
为什么测试带有路由的 React 组件很麻烦？
在传统的网站中，页面的跳转和 URL 管理是后端处理的。然而，在单页面应用程序中，整个 UI 由前端 React 组件驱动，因此组件中包含了路由逻辑。当您测试带有路由的 React 组件时，需要模拟跳转到不同的页面，模拟地址栏的 URL，检查页面组件是否正确加载，等等。这与传统的测试方法不同，需要您进行更多的模拟及手动操作来测试你的组件。
如何在 Enzyme 中测试带有路由的 React 组件？
安装和配置 Enzyme
Enzyme 是用于测试 React 组件的 JavaScript 库。如果还没有安装，请通过 npm 安装它：
npm install --save-dev enzyme enzyme-adapter-react-16
我们还需要配置 Enzyme 以在项目中使用它。将下面这些代码添加到您的测试文件的顶部。
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });怎样模拟路由？
要测试带有路由组件的编写，你需要模拟 React Router DOM 包中的 history 对象来模拟路由。history 对象模拟了地址栏的 URL。具体实现请参见以下代码：
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------
------ - ------------------- - ---- ----------
------ - ----- - ---- ---------
------ --- ---- --------
-------------- ---- -- -- -
----------- ---- --------- --- - ------- -- -- -
----- ------- - ----------------------
------------------
----- ------- - ------
------- ------------------
---- --
---------
--
---------------------------------------------
----------------------------------------------
---
----------- ----- --------- --- ------ ------- -- -- -
----- ------- - ----------------------
-----------------------
----- ------- - ------
------- ------------------
---- --
---------
--
---------------------------------------------
----------------------------------------------
---
---首先，我们在导入中引入了 Router、createMemoryHistory 和 mount。接下来，我们使用 createMemoryHistory 创建了一个不依赖浏览器的 history 对象，并将其推送到 / 和 /about。然后，我们使用 Enzyme 的 mount 方法将 App 组件封装在 Router 中，以便测试路由管理下的组件。最后，我们使用 expect 断言对组件的相关属性进行测试，以确保它们正确地匹配给定的路由路径。
总结
在本文中，我们已经介绍了如何在 Enzyme 中测试带路由的 React 组件。我们讨论了测试带有路由的 React 组件的挑战，并提供了一些适用于 React Router 的测试解决方案。我们向您演示了如何使用 createMemoryHistory 、Router 和 Enzyme 的 mount 方法来测试路由。我们深入讲解了它们的原理及其如何协同工作。希望这些信息可以帮助您更好地测试您的响应式组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647963f1968c7c53b056ba70