在 Jest 单测环境中使用 enzyme-to-json 插件-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发的过程中，单元测试是一个非常重要的环节。而在 React 项目中，Enzyme 是最常用的测试工具之一，它提供了简单易用的 API 来帮助我们测试 React 组件。但是，当我们使用 Enzyme 来测试 React 组件时，测试结果为一个包含多层嵌套的对象，很难直接断言。我们需要将这个对象转化为 JSON 格式，使其更容易比较和断言。这时，enzyme-to-json 插件就变得尤为重要了。

enzyme-to-json 插件简介

enzyme-to-json 是一个用于将 Enzyme 嵌套渲染结果转化为普通 JSON 格式的插件。它可以将 Enzyme 渲染结果中的组件树、样式等都转化为 JSON 格式，并且可以自定义输出的 JSON 格式。

安装和配置

在 Jest 单元测试中使用 enzyme-to-json 插件非常简单。我们只需要在项目中安装 enzyme-to-json 和 @enzyme-to-json/serializer，然后将其添加到 Jest 的配置中即可。

安装

npm install --save-dev enzyme-to-json @enzyme-to-json/serializer

Jest 配置

在项目的 package.json 文件中，添加以下 Jest 配置：

"jest": {
  "snapshotSerializers": ["enzyme-to-json/serializer"]
}

使用 enzyme-to-json 进行测试

在项目中使用 enzyme-to-json 进行测试同样非常简单。

示例代码

假设我们有一个 Header 组件，我们需要测试其渲染是否正确。

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------ ---- -----------------
------ ------ ---- -----------

---------------- ----------- -- -- -
  ---------- ------ ----------- -- -- -
    ----- ------- - --------------- ----
    ------------------------------------------
  ---
---

在这个示例中，我们使用 Enzyme 的 shallow 方法来浅渲染 Header 组件，并使用 toJson 方法将其转化为 JSON 格式。然后我们使用 Jest 的 toMatchSnapshot 方法来生成一个快照文件，以便后续比较测试结果。

总结

使用 enzyme-to-json 插件可以很大程度上简化单元测试的操作，并且在测试结果中使用 JSON 格式也更加清晰易懂。现在，我们已经学会了如何安装和配置 enzyme-to-json，在 Jest 单测环境中使用 enzyme-to-json 进行测试。希望本文对大家有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/646e5468968c7c53b0cd1f21