尧图网站建设 
测试前端【免费下载链接】enzymeJavaScript Testing utilities for React项目地址https://gitcode.com/gh_mirrors/en/enzyme点击查看免费下载.containsMatchingElement(patternNode)是 enzymeShallowWrapper提供的一组包含检测API 中的核心方法用于判断传入的patternNodeReact 元素是否能与浅渲染树中的任意一个节点按包含式规则匹配。本文以 docs/api/ShallowWrapper/containsMatchingElement.md 为骨架结合 ShallowWrapper.js 与 Utils.js 的源码实现以及 enzyme-test-suite 中的测试用例完整讲解它的语义、匹配规则、源码原理与常见误区。读完本文你将能精准区分严格相等与模糊匹配并正确编写包含式断言的测试用例。方法签名与核心语义.containsMatchingElement(patternNode) Boolean该方法返回一个布尔值表示传入的patternNodeReact 元素是否与渲染树中的任意元素匹配。其核心语义有两点匹配可发生在 wrapper 内容的任意位置不是只检查根节点而是搜索整棵浅渲染树wrapper 可以包含多个节点所有节点都会被搜索只要渲染树中任意一处命中就返回true。除此之外匹配遵循的规则与matchesElement完全相同。也就是说containsMatchingElement相当于在整棵树范围内执行matchesElement检查而matchesElement只检查单节点 wrapper 的根节点参见 matchesElement.md。在源码中ShallowWrapper.js 第 914-919 行 的实现与此语义一一对应containsMatchingElement(node) { const adapter getAdapter(this[OPTIONS]); const rstNode adapter.elementToNode(node); const predicate (other) nodeMatches(rstNode, other, (a, b) a b); return findWhereUnwrapped(this, predicate).length 0; }其调用链为先把传入的 React 元素经 adapter 的elementToNode转换为标准的 RST 节点React 标准树节点再通过nodeMatches构造模糊匹配断言比较函数为(a, b) a b即允许模式节点属性数量少于被匹配节点最后由findWhereUnwrapped借助treeFilter遍历整棵渲染树只要有任意节点命中即返回true。参数与返回值ArgumentspatternNodeReactElement需要检测是否存在于当前实例渲染树中的节点。需要特别强调的是这里传入的是ReactElement或 JSX 表达式而不是像.find()、.filter()等多数方法那样传入 CSS 选择器字符串。如果误传字符串选择器将无法得到预期的匹配结果。ReturnsBoolean当前 wrapper 的渲染树中是否存在任意一个节点与传入的patternNode匹配。匹配规则与 matchesElement 一致的包含式匹配由于containsMatchingElement的匹配规则完全复用matchesElement理解这套规则是正确使用它的前提。按 matchesElement.md 的定义patternNode就像一个通配符wildcard要匹配 wrapper 中的某个节点需要同时满足以下条件标签名必须一致tag names must match内容必须匹配对于文本节点忽略首尾空格但不忽略中间空格子元素必须按相同规则递归匹配模式节点的 props属性必须出现在被匹配节点的 props 中反之则不必——即模式节点的属性是子集关系若属性同时出现则值必须一致模式节点 style 中的 CSS 属性必须出现在被匹配节点 style 中反之则不必——同样满足子集关系值出现时须一致。举例来说渲染树中存在div>export function nodeMatches(a, b, lenComp is) { return internalNodeCompare(a, b, lenComp, true); }宽松模式带来的两个关键差异如下。其一props 比较是单向子集关系。在internalNodeCompare中只遍历模式节点left的 props 键逐一检查其是否存在于被匹配节点right中且值相等被匹配节点多出的 props 不影响结果。这正是模式节点 props 必须出现于被匹配节点反之不必的代码依据。对于对象类型的 props如style则通过isEqual进行深比较。其二null/undefined/缺省被同等对待。宽松模式通过removeNullaryReducer把值为null或undefined的 props 从比较中移除使id{null}、id{undefined}与完全不写id视为等价。这一点在测试用例does not differentiate between absence, null, or undefined中被明确验证见 containsMatchingElement.jsx 第 100-122 行。其三children 的递归匹配与文本规范化。childrenMatch通过childrenToSimplifiedArray先对 children 做扁平化忽略null、false、undefined并在宽松模式下对每个字符串子节点执行trim从而实现了忽略文本首尾空格/换行的规则。测试用例works with leading and trailing spaces与works with leading and trailing newlines分别验证了空格与换行场景containsMatchingElement.jsx 第 124-144 行。最后internalNodeCompare在非文本节点上还用lenComp(leftKeys.length - leftHasChildren, rightKeys.length - rightHasChildren)做属性数量的单向比较——对于containsMatchingElement传入的(a, b) a b即模式节点非 children 属性数不能多于被匹配节点从另一个维度确保了子集语义。完整示例以下示例来自原文档完整覆盖了匹配成功与匹配失败两类场景const wrapper shallow(( div div>containsAllMatchingElements(nodes) { if (!Array.isArray(nodes)) { throw new TypeError(nodes should be an Array); } return nodes.every((node) this.containsMatchingElement(node)); } containsAnyMatchingElements(nodes) { return Array.isArray(nodes) nodes.some((node) this.containsMatchingElement(node)); }注意containsAllMatchingElements对非数组入参会抛出TypeError而containsAnyMatchingElements对非数组入参直接返回false。如果你需要整棵树中是否存在完全相等而非近似匹配的节点则应使用.contains()如果你需要必须存在一个同时满足若干模式的节点则组合使用containsAllMatchingElements/containsAnyMatchingElements。此外ReactWrapper对应.mount()全挂载渲染也提供同名方法containsMatchingElement语义与实现ReactWrapper.js 第 457-461 行完全一致文档见 docs/api/ReactWrapper/containsMatchingElement.md在 mount 场景下可直接复用本文的全部规则。小结.containsMatchingElement()是 enzyme 中最适合做松耦合断言的渲染树检测 API它以 ReactElement 为模式在整棵浅渲染树中按props/style 单向子集 children 递归匹配 文本首尾空白忽略的规则寻找近似命中节点。理解其与matchesElement、contains、containsAllMatchingElements、containsAnyMatchingElements四者的边界能帮助你在测试中准确表达树里有没有一个长这样的节点这一意图同时避免把断言写得过紧漏掉额外 props或过松忽略 children从而写出既稳健又具有表达力的 React 组件测试。赞分享测试前端【免费下载链接】enzymeJavaScript Testing utilities for React项目地址https://gitcode.com/gh_mirrors/en/enzyme点击查看免费下载相关推荐enzyme 的 ReactWrapper.containsMatchingElement()渲染树上的宽松元素匹配断言详解enzyme 的 ReactWrapper.containsMatchingElement 渲染树上的宽松元素匹配断言详解 .containsMatching测试前端Enzyme ReactWrapper .containsAllMatchingElements() 详解批量断言 React 渲染树中多个元素是否存在Enzyme ReactWrapper .containsAllMatchingElements 详解批量断言 React 渲染树中多个元素是否存在 导读 在测试前端Enzyme ReactWrapper .contains() 方法详解严格比对 React 元素在挂载渲染树中的存在性Enzyme ReactWrapper .contains 方法详解严格比对 React 元素在挂载渲染树中的存在性 导读 .contains nodeOrN测试前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Enzyme ShallowWrapper.containsMatchingElement：在浅渲染树中模糊匹配 React 元素
测试前端【免费下载链接】enzymeJavaScript Testing utilities for React项目地址https://gitcode.com/gh_mirrors/en/enzyme点击查看免费下载.containsMatchingElement(patternNode)是 enzymeShallowWrapper提供的一组包含检测API 中的核心方法用于判断传入的patternNodeReact 元素是否能与浅渲染树中的任意一个节点按包含式规则匹配。本文以 docs/api/ShallowWrapper/containsMatchingElement.md 为骨架结合 ShallowWrapper.js 与 Utils.js 的源码实现以及 enzyme-test-suite 中的测试用例完整讲解它的语义、匹配规则、源码原理与常见误区。读完本文你将能精准区分严格相等与模糊匹配并正确编写包含式断言的测试用例。方法签名与核心语义.containsMatchingElement(patternNode) Boolean该方法返回一个布尔值表示传入的patternNodeReact 元素是否与渲染树中的任意元素匹配。其核心语义有两点匹配可发生在 wrapper 内容的任意位置不是只检查根节点而是搜索整棵浅渲染树wrapper 可以包含多个节点所有节点都会被搜索只要渲染树中任意一处命中就返回true。除此之外匹配遵循的规则与matchesElement完全相同。也就是说containsMatchingElement相当于在整棵树范围内执行matchesElement检查而matchesElement只检查单节点 wrapper 的根节点参见 matchesElement.md。在源码中ShallowWrapper.js 第 914-919 行 的实现与此语义一一对应containsMatchingElement(node) { const adapter getAdapter(this[OPTIONS]); const rstNode adapter.elementToNode(node); const predicate (other) nodeMatches(rstNode, other, (a, b) a b); return findWhereUnwrapped(this, predicate).length 0; }其调用链为先把传入的 React 元素经 adapter 的elementToNode转换为标准的 RST 节点React 标准树节点再通过nodeMatches构造模糊匹配断言比较函数为(a, b) a b即允许模式节点属性数量少于被匹配节点最后由findWhereUnwrapped借助treeFilter遍历整棵渲染树只要有任意节点命中即返回true。参数与返回值ArgumentspatternNodeReactElement需要检测是否存在于当前实例渲染树中的节点。需要特别强调的是这里传入的是ReactElement或 JSX 表达式而不是像.find()、.filter()等多数方法那样传入 CSS 选择器字符串。如果误传字符串选择器将无法得到预期的匹配结果。ReturnsBoolean当前 wrapper 的渲染树中是否存在任意一个节点与传入的patternNode匹配。匹配规则与 matchesElement 一致的包含式匹配由于containsMatchingElement的匹配规则完全复用matchesElement理解这套规则是正确使用它的前提。按 matchesElement.md 的定义patternNode就像一个通配符wildcard要匹配 wrapper 中的某个节点需要同时满足以下条件标签名必须一致tag names must match内容必须匹配对于文本节点忽略首尾空格但不忽略中间空格子元素必须按相同规则递归匹配模式节点的 props属性必须出现在被匹配节点的 props 中反之则不必——即模式节点的属性是子集关系若属性同时出现则值必须一致模式节点 style 中的 CSS 属性必须出现在被匹配节点 style 中反之则不必——同样满足子集关系值出现时须一致。举例来说渲染树中存在div>export function nodeMatches(a, b, lenComp is) { return internalNodeCompare(a, b, lenComp, true); }宽松模式带来的两个关键差异如下。其一props 比较是单向子集关系。在internalNodeCompare中只遍历模式节点left的 props 键逐一检查其是否存在于被匹配节点right中且值相等被匹配节点多出的 props 不影响结果。这正是模式节点 props 必须出现于被匹配节点反之不必的代码依据。对于对象类型的 props如style则通过isEqual进行深比较。其二null/undefined/缺省被同等对待。宽松模式通过removeNullaryReducer把值为null或undefined的 props 从比较中移除使id{null}、id{undefined}与完全不写id视为等价。这一点在测试用例does not differentiate between absence, null, or undefined中被明确验证见 containsMatchingElement.jsx 第 100-122 行。其三children 的递归匹配与文本规范化。childrenMatch通过childrenToSimplifiedArray先对 children 做扁平化忽略null、false、undefined并在宽松模式下对每个字符串子节点执行trim从而实现了忽略文本首尾空格/换行的规则。测试用例works with leading and trailing spaces与works with leading and trailing newlines分别验证了空格与换行场景containsMatchingElement.jsx 第 124-144 行。最后internalNodeCompare在非文本节点上还用lenComp(leftKeys.length - leftHasChildren, rightKeys.length - rightHasChildren)做属性数量的单向比较——对于containsMatchingElement传入的(a, b) a b即模式节点非 children 属性数不能多于被匹配节点从另一个维度确保了子集语义。完整示例以下示例来自原文档完整覆盖了匹配成功与匹配失败两类场景const wrapper shallow(( div div>containsAllMatchingElements(nodes) { if (!Array.isArray(nodes)) { throw new TypeError(nodes should be an Array); } return nodes.every((node) this.containsMatchingElement(node)); } containsAnyMatchingElements(nodes) { return Array.isArray(nodes) nodes.some((node) this.containsMatchingElement(node)); }注意containsAllMatchingElements对非数组入参会抛出TypeError而containsAnyMatchingElements对非数组入参直接返回false。如果你需要整棵树中是否存在完全相等而非近似匹配的节点则应使用.contains()如果你需要必须存在一个同时满足若干模式的节点则组合使用containsAllMatchingElements/containsAnyMatchingElements。此外ReactWrapper对应.mount()全挂载渲染也提供同名方法containsMatchingElement语义与实现ReactWrapper.js 第 457-461 行完全一致文档见 docs/api/ReactWrapper/containsMatchingElement.md在 mount 场景下可直接复用本文的全部规则。小结.containsMatchingElement()是 enzyme 中最适合做松耦合断言的渲染树检测 API它以 ReactElement 为模式在整棵浅渲染树中按props/style 单向子集 children 递归匹配 文本首尾空白忽略的规则寻找近似命中节点。理解其与matchesElement、contains、containsAllMatchingElements、containsAnyMatchingElements四者的边界能帮助你在测试中准确表达树里有没有一个长这样的节点这一意图同时避免把断言写得过紧漏掉额外 props或过松忽略 children从而写出既稳健又具有表达力的 React 组件测试。赞分享测试前端【免费下载链接】enzymeJavaScript Testing utilities for React项目地址https://gitcode.com/gh_mirrors/en/enzyme点击查看免费下载相关推荐enzyme 的 ReactWrapper.containsMatchingElement()渲染树上的宽松元素匹配断言详解enzyme 的 ReactWrapper.containsMatchingElement 渲染树上的宽松元素匹配断言详解 .containsMatching测试前端Enzyme ReactWrapper .containsAllMatchingElements() 详解批量断言 React 渲染树中多个元素是否存在Enzyme ReactWrapper .containsAllMatchingElements 详解批量断言 React 渲染树中多个元素是否存在 导读 在测试前端Enzyme ReactWrapper .contains() 方法详解严格比对 React 元素在挂载渲染树中的存在性Enzyme ReactWrapper .contains 方法详解严格比对 React 元素在挂载渲染树中的存在性 导读 .contains nodeOrN测试前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考