在 React 应用程序中，使用路由可以帮助我们管理应用程序的不同视图和页面。在开发过程中，我们需要对我们的路由进行测试，以确保我们的路由在不同的情况下能够正常工作。
Enzyme 是一个流行且易于使用的 JavaScript 测试工具，它可以帮助我们测试 React 组件。在本文中，我们将探讨如何使用 Enzyme 测试 React 应用程序的路由。
安装 Enzyme
在使用 Enzyme 之前，您需要安装它。您可以使用 npm 或 yarn 安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
或者
yarn add --dev enzyme enzyme-adapter-react-16
接下来，您需要配置 Enzyme，以便在测试中使用它。
配置 Enzyme
在使用 Enzyme 之前，您需要配置它。首先，您需要为 React 16 配置 Enzyme 适配器。在您的测试文件中，添加以下代码：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });此代码告诉 Enzyme 使用 React 16 适配器，以便在测试中使用它。
编写测试
编写测试可以帮助我们确保我们的应用程序在不同的情况下能够正常工作。为了测试我们的路由，我们将使用 Enzyme 和 Jest（另一个流行的测试框架）。
Jest 自带了一些测试工具，包括匹配器（matchers）和测试环境。在我们的测试文件中，我们将使用 Jest 的测试环境和 Enzyme 的浅渲染函数（shallow rendering）。
浅渲染函数可以模拟渲染 React 组件，但不会对其子组件进行递归渲染。这使得测试变得更加简单和高效。
以下是一个使用 Enzyme 测试 React 应用程序路由的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ------------- -- ------- ----- - ---- -------------------
------ --- ---- --------
------ ---- ---- ---------
------ ----- ---- ----------
------ -------- ---- -------------
------------- -------- -- -- -
---------- ------ --- ---- ---- --- --- --- ------- -- -- -
----- ------- - --------
--------
---- --
---------
--
---------------------------------------------------------------
---
---------- ------ --- ----- ---- --- --- -------- ------- -- -- -
----- ------- - --------
------- ----------------------------
---- --
---------
--
----------------------------------------------------------------
---
---------- ------ --- --- ----- ---- --- --- ----- -------- -- -- -
----- ------- - --------
------- --------------------------
---- --
---------
--
-------------------------------------------------------------------
---
---在此示例中，我们首先导入 React、Enzyme、React Router 和应用程序的组件。然后，我们编写了三个测试用例，以测试我们的应用程序路由。
第一个测试用例测试我们的主页。我们创建了一个浅渲染的包装器，并查找其中的第一个 <Route> 组件。我们断言 component 属性等于我们的 Home 组件。
第二个测试用例测试我们的关于页面。我们创建了一个带有类似于 {initialEntries: ['/about']} 的 URL 的浅渲染器。我们断言第二个 <Route> 组件的 component 属性等于我们的 About 组件。
第三个测试用例测试我们的错误页面。我们创建了一个带有不正确的 URL 的浅渲染包装器。我们断言第三个 <Route> 组件的 component 属性等于我们的 NotFound 组件。
这个测试框架可以帮助我们在不同的场合下测试我们的 React 应用程序路由。您可以根据需要扩展该框架，以满足您的具体需求。
结论
在本文中，我们介绍了如何使用 Enzyme 测试 React 应用程序的路由。我们讨论了 Enzyme 的安装和配置，以及如何编写测试样例测试我们的路由。通过使用 Enzyme，我们可以期望更有效地测试我们的 React 应用程序，并确保我们的路由能够正常工作。
希望这篇文章能够帮助您更好地了解如何使用 Enzyme 测试 React 应用程序的路由。如果您有任何问题或意见，请在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c99d4a336082f2542c4c3