Interroger des éléments dans un contexte spécifique

[Traduction Bêta Non Officielle]

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

within (un alias de getQueriesForElement) prend un élément DOM et le lie aux fonctions de requête brutes, leur permettant d'être utilisées sans spécifier de conteneur. C'est l'approche recommandée pour les bibliothèques construites sur cette API et est utilisée en interne dans React Testing Library et Vue Testing Library.

Exemple : Pour obtenir le texte 'hello' uniquement dans une section appelée 'messages', vous pourriez faire :

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