在前端开发中，使用 Jest 进行单元测试是一种非常常见的方法。然而，假如我们要测试 React 组件，在其中使用了路由跳转，这就需要我们对测试方式进行调整。在这篇文章中，我们将深入探讨如何在 Jest 中处理 React 组件中的路由跳转。
路由跳转介绍
在 React 组件中，路由跳转一般使用第三方包例如 react-router-dom。基本上，这种包可以根据 URL 的变化来匹配一个特定的组件，并将其渲染到页面上。
例如，我们使用以下路由来设置一个简单的 Web 应用：
-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- ------------------
------ ---- ---- --------
------ ----- ---- ---------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
---------
-
-
------ ------- ---在这个例子中，我们有两个组件，Home 和 About。当 URL 为 / 时，渲染 Home 组件，当 URL 为 /about 时，渲染 About 组件。
Jest 测试中的路由跳转
假如我们想要测试这个应用，该怎么做呢？我们不仅需要确保这两个组件分别分别正确渲染，同时还需要测试路由跳转的正确性。这就需要我们重新思考测试方式了。
第一种方法：使用 react-router 测试工具
第一种方法是使用所谓的“浏览器”工具来模拟路由跳转。这些工具包括 react-router-testing 和 react-router-test-context 等反应路由测试工具，可以模拟浏览器环境，并为我们提供了一些函数来模拟路由跳转。
我们可以使用这些工具来编写测试：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ - ------------------- - ---- ---------
------ - ------ - ---- ------------------
------ ------------- ---- -----------------
------------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ---------------------
----- --------- - -
------- ------------------
-------------- --
---------
-
----- ------- - ------------------
-----------------------------------
--
---------- ------ ----- -- ------ ------- -- -- -
----- ------- - ---------------------
----- ------- - ------------------- -------
----- --------- - -
------- ------------------
-------------- --
---------
-
----- ------- - ------------------
----------------------------------------
--------------------------------------------------
--
--这种方法的好处是可以在我们的测试中运行完整的 React 组件，包括路由跳转的内容，这就在测试中确保了每个 React 组件的全部可见性。不过，这种做法的缺点是测试会非常慢，因为这意味着我们需要加载整个应用程序，然后才能够运行测试。
第二种方法：使用 jest.mock 模拟路由跳转
第二种方法是使用 jest.mock 来模拟路由跳转。通过使用 jest.mock 与 jest.spyOn() 来创建一个模拟对象，我们可以测试路由跳转：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- --------- - ---- ------------------------
------ - ---------- - ---- ------------------
------ ------------- ---- -----------------
----------------------------- -- -- --
----------- ----------
---
------------------------- -- -- -
---------- ------ ----------- -- -- -
--------------------------------
----- ----------
--------- ---
--
----- - --------- - - --------------------- ---
-----------------------------------
--
---------- ------ ----- -- ------ ------- -- -- -
----- ---- - ---------
--------------------------------
-----
--------- ---
--
----- - --------- - - --------------------- ---
----------------------------- ------------
-----------------------------------------------
--
--这种方法的好处是测试速度非常快，并且允许我们进行单元测试，这就使我们可以在不加载整个组件的情况下只测试该组件的特定部分。虽然这种方法确实更快，但是并不能测试完全正确的应用程序。一定得思考你的应用程序每个部分，然后根据需要调整测试策略。
总结
在本文中，我们讨论了测试 React 组件中路由跳转的两种方法。无论你使用哪种方法，测试路由跳转都至关重要。我们应该充分了解我们的应用程序，以便更好地测试它，最终确保它在愉快地工作。
如果你不知道如何开展 Jest 测试 React 组件的知识，请参考 React 官网。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483dcf148841e9894317a0c