概述
在 React 应用中，React Router 是一个非常流行的路由库。使用 React Router 可以方便地实现单页面应用（SPA）的路由管理。但是，在进行前端单元测试时，如何模拟 React Router 中的路由呢？本文将介绍通过 Enzyme 库模拟 React Router 路由的方法，希望对正在学习或者使用 Enzyme 的前端开发者有所帮助。
Enzyme 简介
Enzyme 是 React 应用的测试工具箱之一，它提供了一个类似于 jQuery 的 API，用于测试 React 组件。使用 Enzyme 可以轻松地进行组件测试、渲染与断言。Enzyme 与 Jest、Chai 等测试工具的结合使用可以方便地进行前端单元测试。
模拟 React Router 路由
在 React Router 应用中，路由的变化是由用户事件触发的。我们需要在测试中手动模拟用户事件，以测试相应功能的正确性。
下面我们给出一个简单的例子。假设有一个 App 组件，其中包含两个子组件（Home 和 About），根据用户的点击动态切换显示内容。我们的任务是编写测试代码，模拟用户点击事件，测试是否能够正确地显示相应的组件。
首先，需要安装相关库：
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer
其中，enzyme-adapter-react-16 用于适配 React 16.x 版本，react-test-renderer 用于将 Enzyme 组件包装成渲染器，将返回的结果转换为 JavaScript 对象。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------- - ----- - ---- --------- ------ ------- ---- -------------------------- ------ - ------------ - ---- ------------------- ------ --- ---- -------- ------ ---- ---- --------- ------ ----- ---- ---------- ------------------ -------- --- --------- --- -------------- --- ----------- -- -- - ---------- ---- --- ---- ----------- -- -- - ----- ------- - ------ ------------- ----------------------- ---- -- ---------------- -- ----------------------------- ------------------- ------------------------------ -------------------- ----------------------------------------------- ----------------------------- -------------------- ------------------------------ ------------------- --- ---------- ---- --- ----- ----------- -- -- - ----- ------- - ------ ------------- ---------------------------- ---- -- ---------------- -- ----------------------------- -------------------- ------------------------------ ------------------- ----------------------------------------------- ----------------------------- ------------------- ------------------------------ -------------------- --- ---展开代码
在测试代码中，我们首先将 App 组件包装在 MemoryRouter 组件中，使用 initialEntries 属性指定初始路径。然后，通过 Enzyme 的 mount 方法将被测试组件包装起来。使用 contains 方法可以判断是否包含对应的组件。使用 find 方法查找目标元素，simulate 方法模拟用户事件。在这里，我们模拟了两次点击事件，以测试是否能够正确地显示相应的组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67baecbf306f20b3a6a16ab6
