测试前端【免费下载链接】enzymeJavaScript Testing utilities for React项目地址https://gitcode.com/gh_mirrors/en/enzyme点击查看免费下载get(index)是 enzyme 的ReactWrapper以及ShallowWrapper中用于按零基索引从当前 wrapper 中直接取出原始 React 元素ReactElement的核心方法。在mount渲染的完整 DOM 环境中它常与find配合使用用来断言某个节点携带的 props 或验证渲染树中特定位置的元素内容。读完本篇你将掌握get(index)的参数约定、返回值语义、底层实现原理以及它与.at(index)、.getElement()、.getElements()等兄弟方法的边界与取舍。方法签名与行为概述在 ReactWrapper 文档 中该方法的完整说明如下.get(index) ReactElement功能返回当前 wrapper 中给定索引位置的节点。参数indexNumber——零基整数指明要获取的是第几个节点。返回值ReactElement——被检索到的节点注意是元素本身不是 wrapper。官方示例const wrapper mount(MyComponent /); expect(wrapper.find(Foo).get(0).props.foo).to.equal(bar);这段示例展示了最典型的用法先通过find(Foo)得到包含多个Foo元素的 wrapper再用get(0)取出第一个Foo的 ReactElement直接读取其props.foo并断言。由于get返回的是元素而非 wrapper因此可以像操作普通 React 元素一样访问props、key等字段。参数约定与边界行为index是一个零基整数get(0)表示获取第一个节点get(1)表示获取第二个节点依此类推。从 共享测试用例 可以清晰看到这一约定该测试同时被ReactWrapper与ShallowWrapper复用通过注入Wrap工厂const wrapper Wrap(( div div classNamebar foo / div classNamebar bax / div classNamebar bux / div classNamebar baz / /div )); const bar wrapper.find(.bar); expect(bar.get(0)).to.deep.equal(wrapper.find(.foo).getElement()); expect(bar.get(1)).to.deep.equal(wrapper.find(.bax).getElement()); expect(bar.get(2)).to.deep.equal(wrapper.find(.bux).getElement()); expect(bar.get(3)).to.deep.equal(wrapper.find(.baz).getElement());该测试同时验证了两个要点get(index)取出的元素与通过.getElement()拿到的元素深度相等deep.equal说明两者返回的是同一语义下的 ReactElement。get按渲染树中的真实顺序返回节点.bar下的第 0、1、2、3 个元素分别对应该类名下.foo、.bax、.bux、.baz四个节点。关于越界与空 wrapper 的注意点源码实现中get直接对元素数组做下标访问没有做越界保护get(index) { return this.getElements()[index]; }见 ReactWrapper 源码 与 ShallowWrapper 源码因此当index超出节点数量时会得到undefined当 wrapper 为空如find未匹配到任何节点时任何索引都返回undefined。这与.at(index)的行为形成鲜明对比——.at内部会先检查index nodes.length越界时返回一个空 wrapperthis.wrap([])而非直接失败。所以如果只是想要第几个节点继续链式调用 wrapper 方法应优先考虑.at而get更适合于你确信索引有效、需要拿到元素本体做断言或传给其它 API 的场景。底层实现原理get(index)本身非常薄它的核心逻辑是getElements()加上数组下标访问get(index) { return this.getElements()[index]; }ReactWrapper 中的实现在 ReactWrapper 源码 中getElements()的定义为getElements() { return this[NODES].map((n) getAdapter(this[OPTIONS]).nodeToElement(n)); }也就是说ReactWrapper内部维护着一个节点数组this[NODES]getElements()会借助当前激活的 adapter通过getAdapter(this[OPTIONS])解析把每一个内部节点通过nodeToElement转换为标准的 ReactElement再整体映射成数组。get(index)随后取出该数组的index位。ShallowWrapper 中的对应实现ShallowWrapper的实现思路一致见 ShallowWrapper 源码getElements() { return this.getNodesInternal().map((n) getAdapter(this[OPTIONS]).nodeToElement(n)); }差异仅在于内部节点来源是getNodesInternal()。这解释了为何get在浅渲染与完整挂载两种模式下行为一致——两者都经由同一套 adapter 的nodeToElement把内部表示DOM 节点 / React 内部 fiber 节点等归一化为可读、可比较的 ReactElement。与已废弃方法的关联值得注意的是在旧版本 enzyme 中曾存在getNode()/getNodes()等方法如今已在源码中明确废弃并抛出引导性错误getNode() { throw new Error(ReactWrapper::getNode() is no longer supported. Use ReactWrapper::instance() instead); }见 ReactWrapper 源码ShallowWrapper 源码 中的提示则指向getElement()/getElements()。如果遇到旧代码迁移场景应将取元素的需求统一收敛到get/getElement/getElements这套新 API 上。与相关方法的对比get在 enzyme 方法家族中处于一个明确的位置官方文档也给出了相关方法链接方法返回类型语义典型用途.get(index)ReactElement返回指定索引处的节点元素本身不带 wrapper直接读取props、key或把元素传给自定义断言.at(index)ReactWrapper返回包裹指定索引节点的单节点 wrapper继续链式调用.props()、.text()、.find()等 wrapper 方法.getElement()ReactElement返回唯一节点的元素要求 wrapper 恰好包含一个节点取出唯一元素做深度比较.getElements()ArrayReactElement返回 wrapper 内全部元素的数组与期望的元素数组做deep.equal整体断言与.at(index)的区别at.md文档docs/api/ReactWrapper/at.md用一句话点明了二者的关系.get(index) ReactElement— same, but returns the React node itself, with no wrapper.而get.md文档docs/api/ReactWrapper/get.md则从另一侧补充.at(index) ReactWrapper— same, but returns the React node in a single-node wrapper.at的官方示例印证了其 wrapper 语义const wrapper mount(MyComponent /); expect(wrapper.find(Foo).at(0).props().foo).to.equal(bar);对比两个示例可以看到get(0).props.foo直接以属性访问形式读取props是元素对象上的字段而at(0).props()则是方法调用props()是 wrapper 的 API。这是二者最容易混淆、也最直观的区分点。与.getElements()的组合使用当你需要整体断言渲染结果时可以先find出目标集合再用getElements()得到元素数组做整体对比。getElements 文档 给出了可运行的示例const one span /; const two span /; function Test() { return ( div {one} {two} /div ); } const wrapper mount(Test /); expect(wrapper.find(span).getElements()).to.deep.equal([one, two]);在这个场景里get(0)与get(1)分别等价于getElements()[0]与getElements()[1]get本质上是getElements()的便捷下标访问形式。实战建议读 props、取元素本体用get如wrapper.find(Foo).get(0).props.foo一步到位拿到元素对象适合配合expect(...).to.equal(...)使用。继续链式操作用at需要继续调用 wrapper 方法如at(0).simulate(click)、at(0).text()时使用at它返回 wrapper 且对越界有兜底。确认索引有效再调用get由于越界返回undefined建议先用.length即.length属性或断言确保目标集合非空、索引在范围内。元素比较用deep.equalReactElement 是普通对象结构测试中与getElement()/getElements()的结果比较时请使用深度相等断言如 chai 的deep.equal这与 共享测试 的写法一致。浅渲染同样适用get(index)同时存在于ReactWrapper与ShallowWrapper中实现与行为保持一致shallow场景下可放心使用。小结.get(index)是 enzyme 提供的索引取元素的最直接入口以零基index为参数返回对应位置的原始 ReactElement。其实现由getElements()内部经 adapter 的nodeToElement归一化节点加数组下标访问构成逻辑简单、行为可预期。与.at(index)相比get交出的是元素而非wrapper两者在使用场景上互为补充配合.getElement()、.getElements()以及.find()即可覆盖从单元素取出到整集合断言的绝大部分测试诉求。赞分享测试前端【免费下载链接】enzymeJavaScript Testing utilities for React项目地址https://gitcode.com/gh_mirrors/en/enzyme点击查看免费下载相关推荐Enzyme ReactWrapper .at(index) 方法详解按索引定位节点并返回新的 WrapperEnzyme ReactWrapper .at index 方法详解按索引定位节点并返回新的 Wrapper 本文围绕 Enzyme 中 ReactWrapp测试前端Enzyme ShallowWrapper .childAt(index) 详解按索引精确获取子节点Enzyme ShallowWrapper .childAt index 详解按索引精确获取子节点 Enzyme 的 .childAt index 是 Sha测试前端Enzyme ReactWrapper .getElement() 方法完全指南获取被包裹的 ReactElementEnzyme ReactWrapper .getElement 方法完全指南获取被包裹的 ReactElement ReactWrapper.prototyp测试前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考