简介
Enzyme 是一个用于 React 组件测试的 JavaScript 工具库。它可以帮助开发者针对组件进行快速和简单的测试，并提供了大量的测试 API。
React Router 是一个用于构建单页应用程序的 React 路由库。它可以帮助开发者处理应用程序的导航和路由逻辑，并提供了多种路由组件和配置项。
本文将介绍 Enzyme 的新特性，以及如何与 React Router 一起使用 Enzyme 进行测试。
Enzyme 新特性
Enzyme 最近推出了一系列新特性，包括 Hooks、Cypress 和 Jest 支持等。本文将介绍两个新特性 - mount 和 update。
mount
mount 是 Enzyme 新增的一个方法，用于将组件挂载到 DOM 上，包括其所有子组件。这个方法比 shallow 更深度地渲染组件，因此更加适合进行端到端测试。
import { mount } from 'enzyme';
import App from './App';
it('renders correctly', () => {
const wrapper = mount(<App />);
expect(wrapper).toMatchSnapshot();
});上述代码中，我们使用了 mount 方法将 <App /> 组件挂载到 DOM 上，并断言 Enzyme 返回的包装器对象与预期快照一致。
update
update 是 Enzyme 新增的一个方法，用于更新已经挂载到 DOM 上的组件。这个方法通常与 setState 和 forceUpdate 一起使用，以测试组件的状态更新和重新渲染逻辑。
-- -------------------- ---- ------- ------ - ----- - ---- --------- ------ --- ---- -------- ----------- ----------- -- -- - ----- ------- - ---------- ---- ------------------ ------ --------- --- ----------------- ---------------------------------------------------- ---
上述代码中，我们首先使用 mount 方法将 <App /> 组件挂载到 DOM 上，然后使用 setState 更新组件状态，并调用 update 方法触发重新渲染，最后断言 Enzyme 组件包含一个 <p> 元素，其文本内容为 updated。
Enzyme 与 React Router 的实践
在使用 React Router 构建单页应用程序时，常常需要测试路由配置和导航逻辑。下面是一个使用 Enzyme 和 React Router 进行测试的示例。
安装依赖
首先，我们需要安装以下依赖：
npm install react-router-dom enzyme enzyme-adapter-react-16 --save-dev
其中，enzyme 是 Enzyme 的核心包，enzyme-adapter-react-16 是适配 React 16 版本的 Enzyme 适配器，react-router-dom 是 React Router 的 DOM 版本，用于在浏览器中处理路由逻辑。
配置 Enzyme 适配器
在测试代码中，我们需要借助 Enzyme 适配器来连接 React 和 Enzyme。以下是配置 Enzyme 适配器的代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });编写测试用例
下面是一个测试 React Router 路由导航逻辑的用例：
-- -------------------- ---- -------
------ - ----- - ---- ---------
------ ----- ---- --------
------ - ------------- ------ ---- - ---- -------------------
----- ---- - -- -- -------- ----------
----- ----- - -- -- --------- ----------
------------- ----------- -- -- -
----- ------- - ------
------------- -----------------------
------ -------- ---------------- --
------ ------------- ----------------- --
-----
----- ------------------------
------
---------------
--
----------------------------------------------- -------
----------------------------------- - ------- - ---
------------------------------------------------ -------
---上述代码中，我们首先定义了两个简单的组件：Home 和 About。然后，我们使用 MemoryRouter 将它们包裹起来，并配置初始路由路径为 /。
接着，我们在 MemoryRouter 中定义了两个 Route 组件，分别对应 / 和 /about 路径，并分别渲染了 Home 和 About 组件。除此之外，我们还添加了一个包含一个 Link 组件的 <div> 元素，用于模拟导航行为。
最后，我们使用 mount 方法将 MemoryRouter 组件挂载到 DOM 上，并通过 simulate 方法模拟点击 Link 组件，以进行路由导航。然后我们使用 expect 断言文本内容是否匹配 Home Page 和 About Page。
总结
Enzyme 是一个非常强大的 React 组件测试工具。最近，Enzyme 推出了两个新特性 - mount 和 update，用于更深度地渲染和更新组件。
与 React Router 一起使用 Enzyme 进行测试时，我们可以使用 MemoryRouter 和其它路由组件来模拟路由导航行为，并利用 Enzyme 提供的断言 API 来测试应用程序的路由导航和状态更新逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2f057f6b2d6eab3e3c995