Spectator+Jest+Angular：无法通过byText/byTextContent找到嵌套文本

问题描述 #

测试Angular模板时，使用byText可以成功定位到直接文本textICanFindWithByText，但无法找到嵌套在子div中的textIWantToFindWithByTextOrByTextContent。尝试byTextContent仍返回null，需要正确写法及解释。

模板代码：

<div class="container-fluid mb-2 py-3 card-border-Resp card-container-bg-grey">
    <div class="row">
        textICanFindWithByText    
        <div class="col-12 col-md-9 mb-2 py-2 card-info-bg-grey-Resp">
            textIWantToFindWithByTextOrByTextContent
        </div>
    </div>
</div>

测试代码：

const firstResult = spectator.query(byText('textICanFindWithByText'));
const secondResultFirstTry = spectator.query(byText('textIWantToFindWithByTextOrByTextContent'));
const secondResultSeconddTry = spectator.query(byTextContent('textIWantToFindWithByTextOrByTextContent',{selector: 'div'}));

根因分析 #

1. byText默认行为限制：byText默认采用精确匹配，会严格比对元素的原始文本内容（包括HTML缩进带来的换行、空格等空白字符）。嵌套div中的文本实际包含前后空白，因此精确匹配失败。
2. byTextContent用法不当：你传入的selector: 'div'范围过广，会优先匹配父级.row元素（其文本内容包含子div的文本），若目标是子div则需更精准的选择器；此外未充分利用byTextContent默认的部分匹配特性。

解决办法 #

方法1：使用byText关闭精确匹配

通过exact: false开启部分匹配，忽略空白字符的影响：

const secondResult = spectator.query(byText('textIWantToFindWithByTextOrByTextContent', { exact: false }));

方法2：正确使用byTextContent

byTextContent默认支持部分匹配，无需额外配置即可匹配包含目标文本的元素：

// 匹配所有包含目标文本的元素
const secondResult = spectator.query(byTextContent('textIWantToFindWithByTextOrByTextContent'));

// 精准定位：指定子div的类选择器
const secondResult = spectator.query(byTextContent('textIWantToFindWithByTextOrByTextContent', { selector: '.card-info-bg-grey-Resp' }));

方法3：自定义谓词匹配修剪后的文本

若需严格匹配文本内容（忽略前后空白），可自定义谓词处理：

const secondResult = spectator.query(el => el.textContent.trim() === 'textIWantToFindWithByTextOrByTextContent');

关键区别 #

• byText：默认精确匹配元素自身的文本（不含子元素文本），开启exact: false后支持部分匹配。
• byTextContent：匹配元素的全部文本内容（包括子元素文本），默认部分匹配，适合查找包含特定文本的任意元素。

内容的提问来源于stack exchange，提问作者s.stkvc