元素内部查询

within（getQueriesForElement 的别名）接受一个 DOM 元素并将它绑定到原始查询函数，允许在不指定容器的情况下使用它们。这是基于此 API 构建的库的推荐方法，并且在 React 测试库和 Vue 测试库中被内部使用。

示例：要仅在名为“messages”的部分内获取文本“hello”，您可以执行以下操作

原生

import {within} from '@testing-library/dom'

const messages = document.getElementById('messages')
const helloMessage = within(messages).getByText('hello')

React

import {render, within} from '@testing-library/react'

const {getByText} = render(<MyComponent />)
const messages = getByText('messages')
const helloMessage = within(messages).getByText('hello')

Angular

import {render, within} from '@testing-library/angular'

const {getByText} = await render(MyComponent)
const messages = getByText('messages')
const helloMessage = within(messages).getByText('hello')

Cypress

cy.findByText('messages').within(() => {
  cy.findByText('hello')
})