React Router 是一个用于构建单页面应用程序（SPA）的 JavaScript 库。而 Enzyme 是一个在 React 中测试组件的 JavaScript 测试实用工具。本文将介绍如何在 React 中使用 React Router 并使用 Enzyme 进行组件测试。
安装 React Router 和 Enzyme
在继续之前，请确保您已经安装了 React、React Router 和 Enzyme。如果您尚未安装，请按照以下步骤进行安装：
# 安装 React 和 React Router npm install --save react react-dom react-router-dom # 安装 Enzyme npm install --save-dev enzyme enzyme-adapter-react-16
React Router 基础
React Router 帮助我们管理应用程序中的路由。以下是 React Router 基础知识：
路由定义
通过 <Route> 组件来定义路由：
import { Route } from "react-router-dom";
// 定义路由
<Route path="/about" component={About} />其中 path 属性表示路由路径，component 属性表示该路由所对应的组件。
路由渲染
使用 <Route> 组件渲染路由时，路由路径与当前 URL 匹配时，该组件才会被渲染。示例代码：
-- -------------------- ---- ------- ------ - ----- - ---- ------------------- -- ---- ------ ------------- ----------------- -- -- ---- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- ------ --------------- ------------------- --
上面代码中，exact 属性表示精确匹配，即只有 URL 路径为 / 时，才渲染 Home 组件。
路由链接
要在应用程序中链接到特定路由，请使用 <Link> 组件：
import { Link } from "react-router-dom";
<Link to="/about">About</Link>使用 Enzyme 测试 React Router
在 React 中使用 Enzyme 进行组件测试，需要使用 mount 函数。mount 函数会在 DOM 中渲染组件，因此我们可以测试组件是否正确渲染了路由。
下面是一个组件测试使用 React Router 和 Enzyme 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - ------------ - ---- -------------------
------ --- ---- --------
--------------- -- -- -
----------- ------- -------- -- -- -
----- ------- - ------
------------- ----------------------------
---- --
---------------
--
---------------------------------------------
------------------ --------- - --------- --- - ---
--------------------------------------------
------------------ --------- - --------- ---------- - ---
-----------------------------------------------
---
---上面代码中，MemoryRouter 组件用于模拟路由，initialEntries 属性用于设置初始路由。
我们可以使用 wrapper.find() 函数来找到渲染路由的组件，并使用 expect 函数来验证组件是否被正确渲染。
总结
本文介绍了如何在 React 中使用 React Router，并使用 Enzyme 进行组件测试。对于使用 React 和 React Router 开发单页面应用程序的开发人员来说，这是必不可少的知识。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d413abb5eee0b525b8eba8