在 React 应用程序的测试中，Enzyme 是一种流行的测试工具。它提供了许多实用函数来渲染 React 组件并处理 DOM。然而，当我们需要比较组件的输出时，通常需要将其转换为 JSON 格式。这就是 enzyme-to-json 包的作用。
安装
你可以使用 npm 或 yarn 安装 enzyme-to-json：
npm install --save enzyme-to-json
或者
yarn add enzyme-to-json
使用
enzyme-to-json 提供了一个 toJson 函数，用于将 Enzyme 渲染的组件转换为 JSON。常见的使用场景如下：
测试组件快照
使用 Jest 进行单元测试，你可以使用 toMatchSnapshot 函数来比较组件输出的快照。但是，Enzyme 组件包含了许多内部属性和方法，会导致快照无法匹配，这时候可以使用 enzyme-to-json 转换：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
------------------------------------------
---
---比较组件输出
使用 toEqual 函数可以比较两个对象是否相等。但是，Enzyme 组件的输出中包含了很多内部属性和方法，这些属性会导致比较失败。这时候可以使用 enzyme-to-json 转换：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - -------------------- ----
----- -------------- - -
------ ---------
------ --------
--
------------------------------------------------
---
---总结
在 React 应用程序的测试中，将 Enzyme 组件转换为 JSON 是一个常见的需求。enzyme-to-json 包提供了一个简单而有效的解决方案。无论你是在测试组件快照还是比较组件输出，都可以使用它来避免内部属性和方法的干扰。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46264