enzyme ShallowWrapper `.parents()` 详解：向上遍历祖先节点树并过滤

enzyme ShallowWrapper.parents()详解向上遍历祖先节点树并过滤【免费下载链接】enzymeJavaScript Testing utilities for React项目地址: https://gitcode.com/gh_mirrors/en/enzyme导读.parents([selector])是 enzyme 中用于「从当前节点向上遍历祖先链」的核心查询方法它以当前 ShallowWrapper 包裹的单个节点为起点返回其所有父级与祖先节点组成的新 wrapper不包含节点自身并可选地通过EnzymeSelector对祖先进行过滤。本文围绕 docs/api/ShallowWrapper/parents.md 展开结合ShallowWrapper源码实现与仓库内共享测试用例讲清该方法的使用方式、返回值顺序语义、底层遍历原理以及与.parent()、.children()、.closest()的配合用法帮助你在 React 组件测试中精准断言节点与上层结构的关系。方法签名与核心语义.parents([selector]) ShallowWrapper根据官方 API 文档该方法包含三条核心语义返回全部祖先返回对当前 wrapper 中单个节点的所有父级/祖先节点parents/ancestors的包装结果不包含节点自身结果中不会包含当前 wrapper 所包裹的节点本身单节点约束该方法只能在一个只包裹单个节点的 wrapper 上调用It must be a single-node wrapper。对应到源码ShallowWrapper中该方法的实现位于 packages/enzyme/src/ShallowWrapper.js#L1259-L1264parents(selector) { return this.single(parents, (n) { const allParents this.wrap(nodeParents(this, n)); return selector ? allParents.filter(selector) : allParents; }); }可以看到其执行路径非常清晰先用this.single(parents, ...)强制校验当前 wrapper 必须只包裹一个节点再通过nodeParents(this, n)从节点n出发收集全部祖先若传入了selector则对祖先集合调用.filter(selector)进行二次过滤。参数说明可选的EnzymeSelector参数类型必填说明selectorEnzymeSelector否用于过滤祖先节点的选择器不传则返回全部祖先EnzymeSelector是 enzyme 中统一的选择器类型详见 docs/api/selector.md在.parents()中同样适用主要包括以下几种写法CSS 选择器子集类名.foo、.foo-bar、元素标签名div、span、ul、id#foo、属性选择器[hreffoo]、[typetext]、通配符*以及div.foo.bar、.foo .bar、.foo .bar等组合写法React 组件构造函数直接传入组件引用例如wrapper.find(MyComponent).parents(Foo)此时只按组件类型匹配组件 displayName 字符串以大写字母开头的字符串会按组件 displayName 匹配对象属性选择器按节点 props 的子集匹配例如wrapper.find(li).parents({ className: list })。需要注意key与ref这两个 props 由 React 内部使用永远无法作为选择器参与匹配而对象选择器中包含undefined值会抛出TypeError此时应改用.findWhere()。返回值与祖先顺序语义返回值ShallowWrapper——一个包裹了所有匹配祖先节点的新 wrapper。一个很容易被忽略、但对断言至关重要的语义是返回的祖先顺序祖先节点按从近到远排列即索引0是当前节点的直接父级最后一项是渲染树的根节点。这一顺序由底层parentsOfNode的实现保证。nodeParents定义在 packages/enzyme/src/ShallowWrapper.js#L176-L178function nodeParents(wrapper, node) { return parentsOfNode(node, getRootNodeInternal(wrapper)); }而parentsOfNode与pathToNode定义在 packages/enzyme/src/RSTTraversal.js#L111-L113 与 packages/enzyme/src/RSTTraversal.js#L88-L109export function parentsOfNode(node, root) { return (pathToNode(node, root) || []).reverse(); } export function pathToNode(node, root) { const queue [root]; const path []; const hasNode (testNode) node testNode; while (queue.length) { const current queue.pop(); const children childrenOfNode(current); if (current node) return pathFilter(path, hasNode); path.push(current); if (children.length 0) { // leaf node. if it isnt the node we are looking for, we pop. path.pop(); } queue.push(...children); } return null; }pathToNode通过广度优先遍历记录从根到目标节点的完整路径parentsOfNode再将其reverse()从而得到「直接父级在前、根节点在后」的祖先序列。仓库中共享测试 packages/enzyme-test-suite/test/shared/methods/parents.jsx#L17-L37 验证了这一顺序约定const parents wrapper.find(.baz).parents(); expect(parents).to.have.lengthOf(3); expect(parents.at(0).hasClass(bar)).to.equal(true); expect(parents.at(1).hasClass(foo)).to.equal(true); expect(parents.at(2).hasClass(bax)).to.equal(true);嵌套结构为bax foo bar baz时.find(.baz).parents()恰好返回 3 个祖先且at(0)是最贴近.baz的.barat(2)是最外层的.bax。使用示例文档给出的基础示例shallow 渲染场景const wrapper shallow(ToDoList /); expect(wrapper.find(ul).parents()).to.have.lengthOf(2);该断言表明在ToDoList的浅渲染树中ul节点上方共有两个祖先层级例如一个外层div与ToDoList根组件节点。传入选择器进行过滤const wrapper shallow(ToDoList /); // 只保留匹配 .foo 的祖先节点 expect(wrapper.find(ul).parents(.foo)).to.have.lengthOf(1);对应的mount完整渲染场景写法见 docs/api/ReactWrapper/parents.mdconst wrapper mount(ToDoList /); expect(wrapper.find(ul).parents()).to.have.lengthOf(2);ReactWrapper的.parents()实现与ShallowWrapper完全对称位于 packages/enzyme/src/ReactWrapper.js#L794-L799因此浅渲染与完整渲染两种模式下使用方式一致。源码级原理剖析三层调用链.parents()的完整调用链可以归纳为三层ShallowWrapper.parents(selector) └─ single(parents, callback) // 单节点校验ShallowWrapper.js#L1647-L1654 └─ nodeParents(wrapper, node) // 获取全部祖先ShallowWrapper.js#L176-L178 └─ parentsOfNode(node, root) // pathToNode 求路径后 reverseRSTTraversal.js#L111-L113 └─ selector 过滤allParents.filter(selector)其中两个值得展开的细节单节点强校验single方法定义在 packages/enzyme/src/ShallowWrapper.js#L1647-L1654当this.length ! 1时会直接抛出错误if (this.length ! 1) { throw new Error(Method “${fnName}” is meant to be run on 1 node. ${this.length} found instead.); }所以对多节点 wrapper 调用.parents()会得到形如Method parents is meant to be run on 1 node. 2 found instead.的报错提示你先用.at(index)或.first()取单节点。根节点的确定nodeParents中的根节点来自getRootNodeInternal(wrapper)即当前 wrapper 所属渲染树的根而非整个应用树的根。这意味着祖先集合的终点是当前 wrapper 的根节点shallow 场景下通常是渲染的组件根。与.parent()、.children()、.closest()的关系parents()在文档的 Related Methods 中与三个方法互为补充均为 ShallowWrapper 与 ReactWrapper 共有方法语义与.parents()的关系.parent()返回当前节点的直接父级等价于.parents().at(0)/.parents().first().children([selector])返回当前节点的所有子节点方向相反的兄弟遍历.closest(selector)向上查找第一个匹配选择器的节点含自身基于parents()的「取首个匹配」封装源码中这种派生关系非常直观.parent()的实现ShallowWrapper.js#L1271-L1273parent() { return this.flatMap((n) [n.parents().get(0)]); }.closest()的实现ShallowWrapper.js#L1280-L1286closest(selector) { if (this.is(selector)) { return this; } const matchingAncestors this.parents().filter(selector); return matchingAncestors.length 0 ? matchingAncestors.first() : this.findWhere(() false); }可以看到.closest(selector)先判断节点自身是否匹配再复用this.parents().filter(selector)取首个匹配祖先而.parent()直接取parents()结果的第 0 项。理解这一点后在「需要全部祖先」时用.parents()、在「只需要最近一个匹配祖先」时用.closest()、在「只需直接父级」时用.parent()即可避免不必要的选择器开销。实战场景1. 断言节点的层级深度与祖先结构来自共享测试 parents.jsx#L39-L55 的用例表明.parents()对非叶子节点同样有效const wrapper Wrap(( div classNamebax div classNamefoo div classNamebar div classNamebaz / /div /div /div )); const parents wrapper.find(.bar).parents(); expect(parents).to.have.lengthOf(2); expect(parents.at(0).hasClass(foo)).to.equal(true); expect(parents.at(1).hasClass(bax)).to.equal(true);2. 通过选择器定位特定祖先层级当树中存在多个同名类时结合选择器可以精准圈定祖先测试用例 parents.jsx#L57-L73const wrapper Wrap(( div classNamebax foo div classNamefoo div classNamebar div classNamebaz / /div /div /div )); const parents wrapper.find(.baz).parents(.foo); expect(parents).to.have.lengthOf(2); expect(parents.at(0).hasClass(foo)).to.equal(true); expect(parents.at(1).hasClass(bax)).to.equal(true);.baz上方有两个包含.foo类的祖先内层.foo与外层同时含bax foo的根节点均被过滤出来且顺序依旧由近及远。3. 跨越自定义组件边界向上查找完整渲染模式在mount场景下.parents()可以穿透自定义组件边界找到其渲染出的宿主元素。测试 parents.jsx#L143-L170 中CustomForm渲染为form包裹 childrenconst wrapper Wrap(( div CustomForm input / /CustomForm /div )); const formUp input.parents(form); expect(formUp).to.have.lengthOf(1);这里wrapper.find(input)找到的input虽然在 JSX 中并未直接嵌套于form但由于CustomForm渲染出forminput.parents(form)依然能正确命中宿主元素form注意该用例仅在非 shallow 模式下运行。4. 在祖先节点上触发事件.parents()返回的是标准 wrapper可以继续链式调用其他方法。测试 simulate.jsx#L263-L285 展示了「向上找到祖先后模拟点击」的写法wrapper.find(.child-elem).parents(.parent-elem).simulate(click);5. 结合debug()调试祖先结构对.parents()的结果调用.debug()可以输出祖先节点的 HTML 结构快照便于排查选择器未命中的问题共享测试 parents.jsx#L105-L119 中即用debug()验证过滤结果const bChildParents bChild.parents(.b); expect(bChildParents.debug()).to.equal(div classNameb div B child /div /div);注意事项与常见错误必须在单节点 wrapper 上调用对.find()返回多个节点的 wrapper 调用.parents()会直接抛错。多节点场景应先.at(index)或.first()取单个节点。结果不含节点自身需要「自身或祖先」匹配时应使用.closest(selector)其内部先对自身做is(selector)判断而非.parents()。祖先顺序由近及远at(0)是直接父级最后一项是当前 wrapper 的根节点编写循环断言或使用.first()/.last()时务必遵循该顺序。选择器范围受限key/ref不可用于匹配displayName字符串必须以大写字母开头才会按组件名匹配否则会被当作 CSS 标签名处理。shallow 与 mount 的差异shallow 模式下祖先链只包含当前浅渲染树内的节点需要跨自定义组件边界向上查找渲染出的宿主元素时应使用mount见 ReactWrapper.parents。总结.parents([selector])是 enzyme 中向上遍历渲染树的统一入口它通过single()强制单节点约束借助nodeParents→parentsOfNode→pathToNode的调用链完成「根到节点路径反转」的祖先收集再经.filter(selector)实现可选过滤最终返回顺序由近及远的ShallowWrapper。掌握它与.parent()、.closest()的派生关系后无论是断言节点层级、定位特定祖先还是在祖先上触发事件都能写出语义清晰、结构稳健的 React 测试。【免费下载链接】enzymeJavaScript Testing utilities for React项目地址: https://gitcode.com/gh_mirrors/en/enzyme创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考