React 是一个流行的前端开发框架，用于构建交互式用户界面。开发人员需要测试他们的 React 应用程序来确保应用程序的正确性。Enzyme 是一个测试实用程序库，可以帮助 React 开发人员创建隔离的、可重复的测试用例。在本文中，我们将介绍如何使用 Enzyme 生成 React 的快照测试，并提供示例代码。
Enzyme 简介
Enzyme 是由 Airbnb 开发的 React 测试实用程序库。它使 React 组件的测试更加简单，易用。它提供了三种不同的渲染器：浅渲染器、静态渲染器和全渲染器。其中，全渲染器是最完整和完全的 React 测试实用程序。
在本文中，我们将使用 Enzyme 的全渲染器来生成 React 的快照测试。
何为快照测试？
快照测试是一种测试技术，用于捕获应用程序的屏幕快照并将其与预期值进行比较。当应用程序的 UI 更改时，可以使用快照测试来确保 UI 更改不会破坏现有功能。快照测试也是一种可视化测试，可以帮助开发人员更好地理解他们的代码。
安装 Enzyme
在开始使用 Enzyme 进行测试之前，需要首先在项目中安装 Enzyme。可以通过 NPM 来安装 Enzyme。命令如下：
npm install --save-dev enzyme enzyme-adapter-react-16
使用 Enzyme 生成快照测试
以下是使用 Enzyme 生成 React 快照测试的步骤。
第一步：导入 Enzyme
在测试文件的顶部，需要导入 Enzyme：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });此代码导入 Enzyme 和适配器并将其配置为适合 React 16。
第二步：编写测试用例
测试用例应当返回 React 组件的渲染结果，并将结果传递给 Enzyme 的 render() 方法。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
------------- ----------- -- -- -
----- ------- - ----------------- ----
----------------------------------
---
---第三步：运行测试
运行测试时，Enzyme 将运行测试用例并生成屏幕截图。然后，Enzyme 会将屏幕截图与先前的快照进行比较，以确保 UI 没有更改。
第四步：向测试中添加断言
最后，可以向测试中添加断言以确保 UI 的正确性。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
------------- ----------- -- -- -
----- ------- - ----------------- ----
----------------------------------
----- --------- - ------------------------------
----------------------------------
----- ---- - ---------------------------
---------------------------------- --------
---
---在此代码中，我们添加了两个断言：一个检查是否有一个名为“my-component”的元素，另一个检查元素中是否有一个名为“my-text”的元素，并且内容为“Hello World”。
示例代码
下面是一个完整的示例代码，演示如何使用 Enzyme 生成 React 的快照测试：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------
------ --------- ---- --------------
--------------------- -- -- -
------------- ----------- -- -- -
----- ------- - ----------------- ----
----------------------------------
----- --------- - ------------------------------
----------------------------------
----- ---- - ---------------------------
---------------------------------- --------
---
---结论
在本文中，我们介绍了 Enzyme 测试实用程序库，并向您展示了如何使用 Enzyme 生成 React 的快照测试。使用 Enzyme 进行 React 测试，可以帮助开发人员更好地理解他们的代码并确保应用程序的正确性。希望此文能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670227a5d91dce0dc8469daf