当开发一个前端应用时，我们需要经常测试我们的代码。针对每个组件和功能进行测试可以帮助我们确保应用程序正常工作，并且随时可以检测到和修复错误。在现代的前端应用程序中，我们通常使用 Jest 作为我们的测试框架。在 Jest 测试中模拟重定向是一种非常基础的测试技能，纵观全面的测试开发也需要恰当地使用它来确保我们的应用程序在真实环境中的行为正确。下面，我们将重点介绍如何在 Jest 测试中模拟简单重定向。
为什么需要模拟重定向
在前端 web 开发中，重定向是一种非常常见的技术，它主要是在请求发生时通过重定向将用户由当前页面转移到另一个页面。在测试中使用重定向的主要原因是，通常我们的应用程序中有很多页面和路由，很难使用自然方式测试每个页面和路由下的行为。通过模拟重定向，我们可以测试一个页面或路由的 behavior 而不必关注需要导航我们的应用程序，也可以在测试中很好地控制应用程序的上下文。
在 Jest 测试中模拟重定向的方法
前置定义，我们需要先创建一个跳转组件 Redirect，以进行页面路由跳转:
import React from 'react';
import { Redirect } from 'react-router-dom';
export default function RedirectComponent({ to }) {
return <Redirect to={to} />;
}测试组件内部处理重定向后的情况
假设我们在进行登录的时候，如果用户登录成功，则应该跳转到主页。如果登录失败，则应在当前页面呈现一个错误消息。这种情况下我们可以使用 Jest 来验证重定向。
在这个测试用例中，我们首先使用一个渲染器来将我们的组件渲染到 DOM 中，然后通过断言查找重定向组件来验证重定向是否被调用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ - ------------ - ---- -------------------
------ ----- ---- ----------
---------------- ---- -- -- -
---------- -------- -- --------- -- --- ---- -- --------------- -- -- -
----- ------- - ------
------------- ----------------------------
------ --
---------------
--
---------------------------------------------
------------------------------------------------------ - ------- - ------ ----------------- - ---
--------------------------------------------------------- - ------- - ------ ---------- - ---
-------------------------------------------------------- - --------------- -- -- -- ---
----------------------------------------------
---
---在这个测试用例中，我们可以使用 mount 函数，这将组件完全渲染到 DOM 中以便执行以下测试。在测试开始时，我们使用 initialEntries prop 设置 MemoryRouter 的初始条目而不是重定向。在模拟电子邮件和密码后，我们使用 submit 事件调用表单上的 handleSubmit 函数。如果登录成功，我们期望出现一个重定向组件。
测试组件是否正确响应路由状态
这个示例我们将会测试当路由状态改变时，组件是否正确响应。当路由状态改变时，我们希望地址栏中的 URL 发生更改，以支持应用程序的历史记录并保持应用程序的状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ------------ - ---- -------------------
------ --- ---- --------
------ ----- ---- ----------
------ --------- ---- --------------
-------------- ---- -- -- -
---------- ------ --- ----- --------- -- --- ---- -- --- --------------- -- -- -
----- ------- - --------
------------- -----------------------
---- --
---------------
--
--------------------------------------------
------------------------------------------------
---
---------- ------ --- --------- --------- -- --- ---- -- --------------- -- -- -
--------------------------------------- ------
----- ------- - --------
------------- -----------------------
---- --
---------------
--
--------------------------------------------
------------------------------------------------
-------------------------------------------
---
---在这个测试用例中，我们主要是验证了我们的 App 组件是否在路由状态更改时正确地呈现。我们使用 shallow 函数来测试 App 组件，这将 App 组件及其子节点呈现为虚拟 DOM，而不是将它们呈现到真实 DOM 中。在第一个测试用例中，我们首先将 authenticated 状态从 sessionStorage 中删除。根据应用程序的设计，此时应该呈现 Login 组件。在第二个测试用例中，我们将 authenticated 设置为 true，然后再次呈现应用程序。现在，我们应该看到 Dashboard 组件而不是 Login 组件。
结论
在 Jest 测试中模拟重定向是一项非常基础和强大的测试技术，它可以帮助我们测试我们的应用程序，在不需要完全加载它们的情况下进行必要的测试。本文中，我们重点介绍了如何在 Jest 测试中模拟简单重定向，并提供示例代码来帮助您理解如何使用 Jest 测试框架来测试我们的应用程序。希望这个教程对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fd916b44713626017f458d