测试库：如何获取具有文本子节点的父节点答案

【问题标题】：Testing Library: How to get parent node that has a child with Text测试库：如何获取具有文本子节点的父节点
【发布时间】：2020-05-15 02:48:38
【问题描述】：

在测试库中，我试图找到一种方法来查找其子元素符合条件的元素：让我们在测试中呈现的容器中考虑这一点：

    <div class="classA">
        <div class="classB">
            <div class="classC">
                some text
            </div>
        </div>
        <div class="classB">
            <div class="classC">
                more text
            </div>
        </div>
    </div>

我想找到

    <div class="classB">
        <div class="classC">
            some text
        </div>
    </div>

我试过了： getByText(container, 'some text', {selector: 'classB'}) 但它会返回

<div class="classC">
    some text
</div>

为了找到包含此文本的容器/组件/父级，我缺少什么？

【问题讨论】：

container 里面有什么？
在第一个代码 sn-p 中具有 2-3 级嵌套的东西。我的目标是能够找到一个包含文本的组件/节点并执行其他断言，例如：在孩子中找到名称为“Jason”的信息面板，以便我可以测试另一个孩子是否显示最喜欢的“绿色”跨度>

标签： testing jestjs react-testing-library

【解决方案1】：

请看下面的代码，可能会有所帮助

queryAllByText((_, element) => 
element.textContent === "some text" && element.className === 'classB')

【讨论】：

有趣，我不知道你可以传递一个函数！这个概念很有趣，但你怎么能重新找到类匹配呢？如果有额外的类'classB themeDark'？我尝试了 include 而不是 === 但它引入了像 'classB-childA 这样的误报有没有办法利用选择器或者我应该在“”上拆分类
element.classList 会解决你的问题，element.classList.contains('classB')

【解决方案2】：

我知道已经很晚了，但是如果有人在查询文本时想得到父母：

  expect(getByText('Name').parentElement?.style.left).toBe('50px');

【讨论】：

您能详细说明一下语法吗？特别是：.parentElement?.style.left
.style.left 只是一个示例，其中正在进行的测试是关于 style.left 属性（如 css）的值，parentElement 应该只是一个指向包含搜索到的文本的节点。