I’ve been working through Stephen Grider’s React Testing Library and Jest course and stumbled on something that will clean up my tests: the within() function.

There are many times when I find myself drilling into a part of a component to test something nested inside another element. I might take two or three hops to get there:

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

const table = screen.getByRole("table")
const rows = within(table).getAllByRole("row")

This takes two lines and, more importantly:

  • It isn’t immediately clear what I am doing
  • I declare the table constant when it isn’t relevant to anything

With within(), you can shorten this to a single readable line:

const rows = within(screen.getByRole("table")).getAllByRole("row")

I like this because it reads like a sentence and clearly expresses the intention. It also doesn’t create a meaningless intermediate constant.

When to Use within()

  • Testing a specific row in a table
  • Checking content inside a modal or card
  • Any time you need to scope queries to a container

A Note on Async Queries

If you’re using findBy* queries (which are async), remember to await:

const rows = within(await screen.findByRole("table")).getAllByRole("row")

Or if both queries are async:

const button = await within(await screen.findByTestId("modal")).findByRole("button")

When possible, prefer getBy* (synchronous) for cleaner one-liners.

Do you have any testing tips you’ve learned recently?