api-within.mdx

id	title
api-within	Querying Within Elements

import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem'

within (an alias to getQueriesForElement) takes a DOM element and binds it to the raw query functions, allowing them to be used without specifying a container. It is the recommended approach for libraries built on this API and is used under the hood in React Testing Library and Vue Testing Library.

Example: To get the text 'hello' only within a section called 'messages', you could do:

<Tabs defaultValue="native" values={[ { label: 'Native', value: 'native', }, { label: 'React', value: 'react', }, { label: 'Angular', value: 'angular', }, { label: 'Cypress', value: 'cypress', }, ] }>

import{within}from'@testing-library/dom'constmessages=document.getElementById('messages')consthelloMessage=within(messages).getByText('hello')

import{render,within}from'@testing-library/react'const{getByText}=render(<MyComponent/>)constmessages=getByText('messages')consthelloMessage=within(messages).getByText('hello')

import{render,within}from'@testing-library/angular'const{getByText}=awaitrender(MyComponent)constmessages=getByText('messages')consthelloMessage=within(messages).getByText('hello')

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