How to make queries in Jest test within context of particular element?

Question

I'm writing tests in Jest for a React app. Let's say I have a web page that contains multiples of a certain element. In the below case, I have two buttons. I want to make queries in my test about the button that is inside of the div element with a test ID of 2.

Is there a way for me to query for that button within the context of that parent div? Something like:

const secondDiv = screen.getByTestId(2);
const buttonOfInterest = secondDiv.getByRole('button', {name: 'Button'});

I've tried the above before, but it doesn't work.

I know that I could assign test ID's to the buttons, but I think it'd be very helpful in other scenarios to be able to make queries within contexts of particular elements (instead of using screen, which refers to the entire document).

genechk · Accepted Answer · 2020-11-03 20:15:33Z

8

You can use “within” helper function:

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

const someDiv = screen.getByTestId('some-id');
const childButton = within(someDiv).getByRole('button');

edited Nov 3, 2020 at 20:15

answered Nov 3, 2020 at 19:47

genechk

3891 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lucas D Over a year ago

import { screen, within } from '@testing-library/react' If you're writing a react app. Same functionality.

Vlad R · Accepted Answer · 2020-11-04 17:48:54Z

1

In addition to genechk's answer:

If you are writing tests for react app you better use

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

instead of

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

answered Nov 4, 2020 at 17:48

Vlad R

2,7121 gold badge18 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to make queries in Jest test within context of particular element?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related