Consultar dentro de elementos

[Traducción Beta No Oficial]

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

within (un alias de getQueriesForElement) toma un elemento DOM y lo vincula a las funciones de consulta base, permitiendo su uso sin especificar un contenedor. Es el enfoque recomendado para bibliotecas construidas sobre esta API y se utiliza internamente en React Testing Library y Vue Testing Library.

Ejemplo: Para obtener el texto 'hello' solo dentro de una sección llamada 'messages', podrías hacer:

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