Stop querying found elements when testing react

Sat, 15 Feb 2025 00:00:00 +0000

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?

Group JUnit Tests with @Nested

Fri, 14 Feb 2025 00:00:00 +0000

I really like the way that I can nest my JavaScript tests using describe blocks. This keeps my tests nicely organized and grouped together in functional blocks which can be super useful when you get a whole lot of tests created.

describe("my component", () => {
    describe("validation", () => {
        it("ensures that user name is provided", () => {
            // test here
        })
        
        it("ensures that password is valid", () => {
            // test here
        })
    })
    
    describe("when saved", () => {
        it("displays an indication that mutation is in progress", () => {
            // test here
        })
        
        it("provides feedback of success", () => {
            // test here
        })
        
        it("provides an error message on failure", () => {
            // test here
        })
    })
})

I was not aware that you can do something like this in Java with JUnit. Reading through Pragmatic Unit Testing in Java with JUnit I found that this functionality is available by making an inner class and using the @Nested annotation.

Note that @Nested is a JUnit 5 feature, so you’ll need to import it:

import org.junit.jupiter.api.Nested;

Here is an example of how the code above might be organized using JUnit and Java:

class MyComponentTest {

    @Nested
    class Validation {

        @Test
        void ensuresThatUserNameIsProvided() {
            // test here
        }

        @Test
        void ensuresThatPasswordIsValid() {
            // test here
        }
    }

    @Nested
    class WhenSaved {

        @Test
        void displaysIndicationThatMutationIsInProgress() {
            // test here
        }

        @Test
        void providesFeedbackOfSuccess() {
            // test here
        }

        @Test
        void providesErrorMessageOnFailure() {
            // test here
        }
    }
}

One nice bonus: each @Nested class can have its own @BeforeEach setup method, so you can share setup logic within a group without affecting other groups.

I enjoy finding ways to make my testing better and easier to use. Do you have a favorite tip that you use to make your tests better organized?

Testing on Jamal Hansen

Stop querying found elements when testing react

When to Use within()

A Note on Async Queries

Group JUnit Tests with @Nested

When to Use `within()`