Consultando dentro de elementos

[Tradução Beta Não Oficial]

Esta página foi traduzida por PageTurner AI (beta). Não é oficialmente endossada pelo projeto. Encontrou um erro? Reportar problema →

within (um alias para getQueriesForElement) recebe um elemento DOM e o associa às funções de consulta (query) brutas, permitindo que sejam usadas sem especificar um contêiner. Essa é a abordagem recomendada para bibliotecas construídas sobre essa API e é usada internamente no React Testing Library e Vue Testing Library.

Exemplo: Para obter o texto 'hello' apenas dentro de uma seção chamada 'messages', você poderia fazer:

Native

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')
})