Enzyme ReactWrapper 的 `.render()` 方法：把已挂载组件转为 HTML 后用 Cheerio 断言-创锋一号

测试
前端

【免费下载链接】enzyme

JavaScript Testing utilities for React

项目地址：https://gitcode.com/gh_mirrors/en/enzyme

本指南围绕 Enzyme 中ReactWrapper.prototype.render()方法展开，它能把当前 ReactWrapper 所包裹单个节点的子树渲染成静态 HTML 字符串，再包装成一个 CheerioWrapper（基于 cheerio 的 jQuery 风格对象），从而让你用find、is、hasClass、attr等选择器能力直接对渲染产物做断言。读完本文，你将掌握.render()的调用约束（必须是单节点 wrapper）、返回值语义，以及它在 Enzyme 源码中的完整实现链路，并能在实际测试中与.html()、静态渲染等方案正确取舍。

方法签名与返回值

在 ReactWrapper 官方 API 文档中，.render()的签名为：

.render() => CheerioWrapper

具体语义（参见 render.md）：

作用：返回当前节点子树渲染后 HTML 的 CheerioWrapper（"Returns a CheerioWrapper around the rendered HTML of the single node's subtree"）。
约束：它必须是一个单节点（single-node）wrapper才能调用，这一点与.html()、.text()等"单节点方法"一致。
返回值：CheerioWrapper，即由 cheerio 解析 HTML 后得到的包装对象，可调用 cheerio 的遍历、查找与断言 API。

官方示例：在挂载组件上验证渲染产物

原文档给出的完整示例（render.md）如下，先定义两个组件：

function Foo() { return (<div className="in-foo" />); }

function Bar() { return ( <div className="in-bar"> <Foo /> </div> ); }

然后mount出 wrapper，并分别用 ReactWrapper 的.find()与.render()返回的 CheerioWrapper 的.find()做对比断言：

const wrapper = mount(<Bar />); expect(wrapper.find('.in-foo')).to.have.lengthOf(1); expect(wrapper.render().find('.in-foo')).to.have.lengthOf(1);

这两条断言殊途同归：前者在 React 组件树上查找，后者在渲染后的 HTML 字符串上查找，结果都得到 1 个.in-foo节点。区别在于.render()之后，你操作的是纯 HTML 文档对象，与 React 组件实例、生命周期、状态完全解耦。

实现原理：从 RST 节点到 Cheerio 对象的完整调用链

.render()本身实现非常薄，真正的工作由html()与loadCheerioRoot()完成。以下是源码级拆解。

1.`ReactWrapper.render()`只做两件事

在 packages/enzyme/src/ReactWrapper.js#L647-L657 中：

/** * Returns the current node rendered to HTML and wrapped in a CheerioWrapper. * * NOTE: can only be called on a wrapper of a single node. * * @returns {CheerioWrapper} */ render() { const html = this.html(); return loadCheerioRoot(html); }

即：先调用this.html()拿到 HTML 字符串，再交给loadCheerioRoot(html)包装成 CheerioWrapper。

2.`html()`负责"单节点校验 + 生成 HTML"

html()的实现位于 packages/enzyme/src/ReactWrapper.js#L642-L645：

html() { const adapter = getAdapter(this[OPTIONS]); return this.single('html', (n) => getHTMLFromHostNodes(n, adapter)); }

这里有两个关键点：

this.single(...)是 Enzyme 内部用于强制"wrapper 必须恰好包含一个节点"的守卫，当 wrapper 为空或包含多个节点时它会抛错，这正是文档强调"must be a single-node wrapper"的底层机制。
getHTMLFromHostNodes(n, adapter)负责把 RST（React Standard Tree）节点转换为 HTML。其实现位于 packages/enzyme/src/RSTTraversal.js#L190-L208：

function getHTMLFromHostNode(hostNode) { if (hostNode == null) { return null; } return hostNode.outerHTML.replace(/\sdata-(reactid|reactroot)+="([^"]*)+"/g, ''); } export function getHTMLFromHostNodes(node, adapter) { return getTextFromRSTNode(node, { recurse(item) { return getHTMLFromHostNodes(item, adapter); }, handleHostNodes(item) { const nodes = [].concat(adapter.nodeToHostNode(item, true)); return nodes.map(getHTMLFromHostNode).join(''); }, nullRenderReturnsNull: true, }); }

可以看到它通过 adapter 的nodeToHostNode(item, true)把 React 节点映射为真实 DOM（host）节点，然后拼接outerHTML，并主动剔除data-reactid/data-reactroot这类 React 内部标记属性，保证输出的是干净的、可读的 HTML 字符串。

3.`loadCheerioRoot()`决定如何解析这段 HTML

HTML 字符串拿到后，packages/enzyme/src/Utils.js#L411-L422 的loadCheerioRoot负责把它变成 Cheerio 对象：

export function loadCheerioRoot(html) { if (!html) { return cheerio.root(); } if (!isHtml(html)) { // use isDocument=false to create fragment return cheerio.load(html, null, false).root(); } return cheerio.load('')(html); }

三种分支对应三种场景：

HTML 为空：直接返回cheerio.root()，此时 CheerioWrapper 里没有任何节点（长度 0），find等操作自然返回空集；
非完整 HTML 文档（如一段 JSX 片段）：用cheerio.load(html, null, false)以fragment（片段）模式解析，避免 cheerio 自动补全<html>/<body>等文档骨架；
完整 HTML 文档：走标准的cheerio.load('')(html)路径。

这一设计保证了.render()既能处理<Bar />这样的完整组件树，也能处理组件返回的任意片段。

用 CheerioWrapper 能做什么：来自共享测试套件的验证

Enzyme 测试套件中为.render()编写了专门的共享用例（同时跑在 ReactWrapper 与 ShallowWrapper 上），见 packages/enzyme-test-suite/test/shared/methods/render.jsx。其中有几个非常实用的行为断言：

const wrapper = Wrap(<Bar />); expect(wrapper.render().find('.in-foo')).to.have.lengthOf(1); const rendered = wrapper.render(); expect(rendered.is('.in-bar')).to.equal(true); expect(rendered).to.have.lengthOf(1); const renderedFoo = wrapper.find(Foo).render(); expect(renderedFoo.is('.in-foo')).to.equal(true); expect(renderedFoo.is('.in-bar')).to.equal(false); expect(renderedFoo.find('.in-bar')).to.have.lengthOf(0);

这些断言揭示了 CheerioWrapper 的典型用法：

.find(selector)：在 HTML 上按 CSS 选择器查找子节点，返回新的 CheerioWrapper；
.is(selector)：判断当前节点本身是否匹配选择器；
.length/.lengthOf(1)：断言节点数量。

此外，测试套件还覆盖了**无状态函数组件（SFC）**场景（const Foo = () => <div className="in-foo" />形式），说明.render()对函数式组件同样适用，这在 hooks 时代依然有效。

与`.html()`及静态`render()`的辨析

`.render()`vs`.html()`

两者共享同一套 HTML 生成链路，区别只在返回类型与后续能力：

方法	返回类型	后续操作
`.render()`	`CheerioWrapper`	可继续`.find()`、`.is()`、`.hasClass()`等链式查询
`.html()`	`String`	只能做字符串层面的断言，如`expect(wrapper.html()).to.contain(...)`

.html()的官方文档（html.md）同样注明"can only be called on a wrapper of a single node"，且它只是"返回当前渲染树的 HTML 字符串"，没有任何查询能力。当需要结构化地检查渲染结果（如统计节点个数、按类名查找、判断层级关系）时，.render()是更合适的选择；当只需要比对整段 HTML 时，.html()更轻量。

ReactWrapper 的`.render()`vs 静态渲染`render()`

Enzyme 还提供独立的静态渲染 API（见 docs/api/render.md 与 packages/enzyme/src/render.js），两者名字相同但定位不同：

静态render(node)：不挂载组件，直接把 React 元素渲染成静态 HTML 的 CheerioWrapper，不触发生命周期方法，也没有组件实例与状态；
ReactWrapper 的.render()：在已经mount出来的 wrapper 上调用，作用于"当前节点子树"，它背后是同一个已挂载的渲染树，只是把 HTML 快照交给 cheerio 查询。

因此，如果你本来就需要mount后的完整实例能力（setState、simulate、访问instance()等），中途想对某一段渲染结果做 HTML 级断言，用wrapper.render()最顺手；如果从头到尾只关心静态输出、想省去挂载开销，则直接使用独立的render(node)静态 API。

使用注意事项

单节点前置条件：.render()与.html()一样，只能作用在恰好包含一个节点的 wrapper 上。多节点或空 wrapper 会触发single()校验抛错。需要先通过.find()、.first()等收窄到单节点再调用（相关方法见 find.md、first.md）。
只读快照：返回的 CheerioWrapper 是纯 HTML 视图，与 React 状态、props、事件系统完全脱钩。你不能通过它simulate事件或修改状态，它只适合"读"不适合"写"。
宿主节点语义：.render()走的是adapter.nodeToHostNode(item, true)映射后的真实 DOM（host）节点，因此它返回的是组件渲染出的实际 DOM 结构，自定义组件自身（如<Foo />）不会出现在输出中，输出的是<Foo />最终渲染的<div className="in-foo" />。
纯净的 HTML：生成过程中会移除data-reactid、data-reactroot等 React 内部属性，输出的 HTML 更接近浏览器中开发者工具看到的内容，便于做稳定断言。
兼容性：共享测试套件中的用例对 React 0.13 之后（含 SFC 场景）的版本做了覆盖，个别早期版本（如 15.0 / 15.1）存在已知用例跳过，详见 render.jsx 中的FIXME注释。

进一步阅读

官方 API 说明：render.md、html.md、ReactWrapper API 目录
源码实现：ReactWrapper.render() 定义、html() 定义、loadCheerioRoot()、getHTMLFromHostNodes()
测试验证：共享测试用例 render.jsx
对比参考：静态渲染 API render.md、mount.md

测试
前端

【免费下载链接】enzyme

JavaScript Testing utilities for React

项目地址：https://gitcode.com/gh_mirrors/en/enzyme

点击查看免费下载

企业官网建设流程全解析

【免费下载链接】enzyme

方法签名与返回值

官方示例：在挂载组件上验证渲染产物

实现原理：从 RST 节点到 Cheerio 对象的完整调用链

1.`ReactWrapper.render()`只做两件事

2.`html()`负责"单节点校验 + 生成 HTML"

3.`loadCheerioRoot()`决定如何解析这段 HTML

用 CheerioWrapper 能做什么：来自共享测试套件的验证

与`.html()`及静态`render()`的辨析

`.render()`vs`.html()`

ReactWrapper 的`.render()`vs 静态渲染`render()`

使用注意事项

进一步阅读

【免费下载链接】enzyme

相关推荐

enzyme ReactWrapper `.html()` 方法详解：获取组件渲染后的真实 HTML 标记字符串

Enzyme ReactWrapper `.unmount()` 详解：完整走完 React 组件的卸载/挂载生命周期

enzyme ReactWrapper `.parent()` 详解：获取节点的直接父级并构建可断言的 ReactWrapper

热门文章

文章分类

标签云

需要专业的网站建设服务？

企业官网建设流程全解析

【免费下载链接】enzyme

方法签名与返回值

官方示例：在挂载组件上验证渲染产物

实现原理：从 RST 节点到 Cheerio 对象的完整调用链

1.ReactWrapper.render()只做两件事

2.html()负责"单节点校验 + 生成 HTML"

3.loadCheerioRoot()决定如何解析这段 HTML

用 CheerioWrapper 能做什么：来自共享测试套件的验证

与.html()及静态render()的辨析

.render()vs.html()

ReactWrapper 的.render()vs 静态渲染render()

使用注意事项

进一步阅读

【免费下载链接】enzyme

相关推荐

enzyme ReactWrapper `.html()` 方法详解：获取组件渲染后的真实 HTML 标记字符串

Enzyme ReactWrapper `.unmount()` 详解：完整走完 React 组件的卸载/挂载生命周期

enzyme ReactWrapper `.parent()` 详解：获取节点的直接父级并构建可断言的 ReactWrapper

热门文章

文章分类

标签云

相关文章

LLM批量调用成本骤降63%：错峰调度器与对账体系实战解析

3ds Max插件选型指南：从建模渲染到动画环境的完整工作流

房地产信息化四阶段与房源信息质量：从数字化到经纪人协作

需要专业的网站建设服务？

1.`ReactWrapper.render()`只做两件事

2.`html()`负责"单节点校验 + 生成 HTML"

3.`loadCheerioRoot()`决定如何解析这段 HTML

与`.html()`及静态`render()`的辨析

`.render()`vs`.html()`

ReactWrapper 的`.render()`vs 静态渲染`render()`