Enzyme ReactWrapper `.last()` 方法详解：取匹配节点集合的最后一个元素-平芜编程栈

Enzyme ReactWrapper`.last()`方法详解：取匹配节点集合的最后一个元素

【免费下载链接】enzymeJavaScript Testing utilities for React项目地址: https://gitcode.com/gh_mirrors/en/enzyme

.last()是 Enzyme 测试工具中用于将当前 wrapper 匹配到的节点集合"缩减"为仅包含最后一个节点的实例方法，其行为等价于.at(length - 1)。无论你使用的是全量渲染的mount还是浅渲染的shallow，.last()都能稳定地让你定位到一组匹配节点中的最后一项，从而对其执行断言、读取 props 或继续链式查找。读完本文，你将掌握.last()的返回值语义、边界行为、底层实现原理以及它与其他索引类方法（.at()、.first()）的组合用法。

方法签名与语义

.last() => ReactWrapper

.last()接收零个参数，把当前 wrapper 中由.find()等查询方法产生的匹配节点集合缩减为集合中的最后一个节点，并返回一个包裹该节点的全新 wrapper。这与 jQuery 中.last()的行为一致，也与文档中对它的定义"Reduce the set of matched nodes to the last in the set, just like.at(length - 1)"完全吻合。

返回值

ReactWrapper：一个包裹当前集合中最后一个节点的新 wrapper。注意它返回的是新的 wrapper 实例，不会修改原 wrapper，因此可以安全地进行链式调用或保留原集合继续使用。

基础示例

官方文档给出的经典用法是配合mount全量渲染，先通过.find()定位到多个组件实例，再用.last()取出最后一个并校验其 props：

const wrapper = mount(<MyComponent />); expect(wrapper.find(Foo).last().props().foo).to.equal('bar');

同样地，在shallow浅渲染场景下用法完全一致：

const wrapper = shallow(<MyComponent />); expect(wrapper.find(Foo).last().props().foo).to.equal('bar');

更常见的实战场景是：当页面中存在多个同类节点（例如列表中的多个按钮、多张卡片）时，.find('.bar')会匹配到多个节点，此时.last()可以帮助你精准命中"最后一个"：

const wrapper = mount( <div> <div className="bar" /> <div className="bar" /> <div className="bar" /> <div className="bar baz" /> </div> ); // 集合中共有 4 个 .bar 节点，最后一个额外拥有 baz 类名 expect(wrapper.find('.bar').last().hasClass('baz')).to.equal(true);

这段断言也是 Enzyme 官方测试套件 packages/enzyme-test-suite/test/shared/methods/last.jsx 中验证.last()行为的核心用例，直接说明了"返回当前集合中最后一个节点"的语义。

源码实现：`.last()`如何工作

.last()的实现非常简洁，它复用了.at()的索引能力。在 ReactWrapper.js 中：

/** * Returns a wrapper around the last node of the current wrapper. * * @returns {ReactWrapper} */ last() { return this.at(this.length - 1); }

而在 ShallowWrapper.js 中有着完全对称的实现：

last() { return this.at(this.length - 1); }

两个 wrapper 类（ReactWrapper与ShallowWrapper）在.last()上的实现逻辑完全一致：以当前集合长度length减一作为索引，交给.at()完成取节点与包装。而.at()的实现在两个类中也是对称的（ReactWrapper.js 与 ShallowWrapper.js）：

at(index) { const nodes = this.getNodesInternal(); if (index < nodes.length) { return this.wrap(nodes[index]); } return this.wrap([]); }

由此可以推导出.last()的关键行为链：

this.length返回当前 wrapper 内包裹的节点总数（详见 length 文档）；
length - 1是最后一个节点的零基索引；
.at(index)从内部节点数组getNodesInternal()中取出该节点，并通过this.wrap(nodes[index])将其包装成新的 wrapper 返回。

边界行为：空集合下的`.last()`

从源码结构可以推断出一个值得注意的边界情况：如果当前 wrapper 匹配到的节点集合为空（例如.find()没有命中任何节点），则length为 0，last()会等价于调用.at(-1)。此时由于-1 < 0（节点数组长度为 0）不成立，.at()会走return this.wrap([])分支，返回一个包裹空数组的空 wrapper，而不是抛出异常。这也与 Enzyme 一贯的"查询无结果返回空 wrapper"设计保持一致——你可以在后续通过.exists()或.length判断是否真的取到了节点。

返回新实例，不影响原集合

由于.at()内部使用this.wrap(...)创建全新 wrapper，.last()同样返回独立的新实例。原 wrapper 及其集合保持不变，这意味着你既可以用wrapper.find(Foo).last()链式操作，也可以在之后继续对wrapper.find(Foo)的完整集合做.at(0)、.first()、.length等操作。

与`.at()`、`.first()`的关系

.last()是 Enzyme 索引类 API 家族的一员，三者可以互相换算：

方法	等价写法	语义
`.first()`	`.at(0)`	返回集合中第一个节点
`.last()`	`.at(length - 1)`	返回集合中最后一个节点
`.at(index)`	—	返回指定零基索引处的节点

其中.first()在源码中同样是对.at(0)的薄封装（ReactWrapper.js）：

first() { return this.at(0); }

三者均返回包裹单个节点的新 wrapper。如果你的需求是直接拿到 React 元素本身（而不是 wrapper），则应改用.get(index)，它返回ReactElement而非 wrapper；相关对比可参考.get()文档与.at()文档。

Enzyme ReactWrapper `.last()` 方法详解：取匹配节点集合的最后一个元素