Enzyme 是 React 生态系统中非常受欢迎的测试工具之一，而 React Router 则是构建现代 Web 应用程序中必不可少的路由工具。如何将这两个工具结合使用是前端开发中的一个重要问题。
在本文中，我将介绍 Enzyme 和 React Router 最佳实践，并提供示例代码以帮助您更好地了解如何使用这两个工具。
Enzyme 是一个 React 测试工具库，它可以模拟组件的生命周期和交互，可以方便地测试 React 组件。React Router 则是一个用于处理应用程序路由的库，它允许开发人员在应用程序中实现多个视图，并根据 URL 进行导航。
在将 Enzyme 和 React Router 结合使用时，需要注意以下几点最佳实践：
- 使用
<MemoryRouter>替代<BrowserRouter>或<HashRouter>
在测试 React Router 时，如果使用 <BrowserRouter> 或 <HashRouter>，那么测试时会导致 URL 的地址栏发生变化。这会导致测试变得非常复杂，因为您需要模拟不同的 URL。因此，将 <MemoryRouter> 用于测试是一个更好的选择，它可以在内存中管理路由状态。
示例代码：
-- -------------------- ---- -------
------ - ------------ - ---- -------------------
-------------- --- ---- ------ -- --- ------ -- -- -
---------- -------- -- --- ------ ------ -- -- -
----- ------- - ------
------------- ----------------- -------- ---
---- --
---------------
--
-- ---
---
---- 使用
mount()而不是shallow()
在测试 React Router 组件时，如果使用 shallow()，那么测试时仅测试单个组件，并不模拟整个应用状态。因此，使用 mount() 可以更好地模拟整个应用程序的状态，包括路由状态。
示例代码：
-- -------------------- ---- -------
------ - ------------ - ---- -------------------
------------- --- ----------- -- -- -
------------- --- ------- ---- ----- -- --- ------- -- -- -
----- ------- - ------
------------- -----------------------
---- --
---------------
--
-----------------------------------------------
------------------------------------------------------------- - ------- - ---
------------------------------------------------
---
---- 在测试之前添加路由配置
在进行 React Router 测试之前，应先配置路由。这可以确保 Enzyme 使用正确的路由配置加载组件。如果没有配置路由，那么测试会失败或者会得到不正确的结果。
示例代码：
-- -------------------- ---- -------
------ - ----- - ---- -------------------
----- ----------- - -- -- -
-----
--------------------
------
--
----- ------ - -
- ----- ---- ---------- ------------ ------ ---- --
--
------------- -- ----------- -- -- -
----- ------- - ------------------- --------------------------- -------------------
--------------------------------------------------
---- 使用
<Switch>组件
在测试 React Router 时，应使用 <Switch> 组件，因为它确保了路由匹配仅在找到正确的路由时进行。否则，将仅显示第一个匹配的路由。
示例代码：
-- -------------------- ---- -------
------ - ------------- ------ ------ - ---- -------------------
------------- --- ------- ------- -- -- -
----- ------- - ------
------------- -----------------------
--------
------ -------- --------------- ----------
------ ------------------------ ----------
---------
---------------
--
-----------------------------------------------
---通过遵循这些 Enzyme 和 React Router 的最佳实践，您可以更轻松地测试您的 React 应用程序。希望本文对于您的学习和使用有所帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6780ce2fce7f4861254a3807