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

测试前端【免费下载链接】enzymeJavaScript 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 的 CheerioWrapperReturns a CheerioWrapper around the rendered HTML of the single nodes subtree。约束它必须是一个单节点single-nodewrapper才能调用这一点与.html()、.text()等单节点方法一致。返回值CheerioWrapper即由 cheerio 解析 HTML 后得到的包装对象可调用 cheerio 的遍历、查找与断言 API。官方示例在挂载组件上验证渲染产物原文档给出的完整示例render.md如下先定义两个组件function Foo() { return (div classNamein-foo /); }function Bar() { return ( div classNamein-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()负责单节点校验 生成 HTMLhtml()的实现位于 packages/enzyme/src/ReactWrapper.js#L642-L645html() { 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)负责把 RSTReact Standard Tree节点转换为 HTML。其实现位于 packages/enzyme/src/RSTTraversal.js#L190-L208function 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 节点映射为真实 DOMhost节点然后拼接outerHTML并主动剔除data-reactid/data-reactroot这类 React 内部标记属性保证输出的是干净的、可读的 HTML 字符串。3.loadCheerioRoot()决定如何解析这段 HTMLHTML 字符串拿到后packages/enzyme/src/Utils.js#L411-L422 的loadCheerioRoot负责把它变成 Cheerio 对象export function loadCheerioRoot(html) { if (!html) { return cheerio.root(); } if (!isHtml(html)) { // use isDocumentfalse to create fragment return cheerio.load(html, null, false).root(); } return cheerio.load()(html); }三种分支对应三种场景HTML 为空直接返回cheerio.root()此时 CheerioWrapper 里没有任何节点长度 0find等操作自然返回空集非完整 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 classNamein-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)映射后的真实 DOMhost节点因此它返回的是组件渲染出的实际 DOM 结构自定义组件自身如Foo /不会出现在输出中输出的是Foo /最终渲染的div classNamein-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赞分享测试前端【免费下载链接】enzymeJavaScript Testing utilities for React项目地址https://gitcode.com/gh_mirrors/en/enzyme点击查看免费下载相关推荐enzyme ReactWrapper .html() 方法详解获取组件渲染后的真实 HTML 标记字符串enzyme ReactWrapper .html 方法详解获取组件渲染后的真实 HTML 标记字符串 导读 ReactWrapper.html 是 enzy测试前端Enzyme ReactWrapper .unmount() 详解完整走完 React 组件的卸载/挂载生命周期Enzyme ReactWrapper .unmount 详解完整走完 React 组件的卸载/挂载生命周期 本文以 Enzyme 官方文档 docs/api测试前端enzyme ReactWrapper .parent() 详解获取节点的直接父级并构建可断言的 ReactWrapperenzyme ReactWrapper .parent 详解获取节点的直接父级并构建可断言的 ReactWrapper 导读 .parent 是 enzyme测试前端上一篇FlashAttention 从源码编译到安装上手5 分钟跑通 A100/H100 的完整避坑指南下一篇AWS存储服务终极指南从S3到EFS的完整存储解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考