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.

Answer 1

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

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

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

Answer 2

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