How to access child element from parent using react testing library?

Question

I have DOM like so:

<label value="false" data-testid="source" class="StyledSwitch">
    <input type="checkbox" name="source" >
    <i class="ball-container"></i>
    <span class="label" data-enabled="On" data-disabled="Off"></span>
</label>

How can I access input element using label with data-testid source

I have tried something like below,

const element = screen.getByTestId('source').firstChild();

but this gives error "object is possibly null" cannot invoke an object which is possibly null. How to fix this?

Could someone help me with this? Thanks.

Kostas Minaidis · Accepted Answer · 2025-01-28 09:26:38Z

3

You could use a querySelector to select the input, like this:

const element = screen.getByTestId('source').querySelector('input');

if (element) {
    /// Do something...
);

edited Jan 28 at 9:26

Kostas Minaidis

5,6814 gold badges21 silver badges31 bronze badges

answered Jan 6, 2022 at 19:37

vonny

394 bronze badges

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

1 Comment

Organic Jul 29 at 13:41

"Avoid direct Node access. Prefer using the methods from Testing Library."

sreejith · Accepted Answer · 2021-11-09 11:18:31Z

1

const element = getByTestId('source').firstChild;

answered Nov 9, 2021 at 11:18

sreejith

788 bronze badges

3 Comments

Jonathan Southern Over a year ago

Do you mind going further in depth to explain the reasoning behind this answer?

Neurothustra Over a year ago

I don't know why it's downvoted. It worked for me as the best answer here.

Organic Jul 29 at 13:41

"Avoid direct Node access. Prefer using the methods from Testing Library."

Antoine · Accepted Answer · 2022-01-06 21:02:01Z

0

I would recommend using a querySelector:

const element = getByTestID('').firstchild;

edited Jan 6, 2022 at 21:02

Antoine

1,4634 gold badges22 silver badges30 bronze badges

answered Jan 6, 2022 at 19:47

Jack1999

715 bronze badges

Collectives™ on Stack Overflow

How to access child element from parent using react testing library?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related