CODEWITHSUNDEEP
react-testing-library
stackuser
stackuser

Reputation: 307

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

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.

Upvotes: 3

Views: 8582

Answers (3)

vonny
vonny

Reputation: 41

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

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

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

Upvotes: 4

Jack1999
Jack1999

Reputation: 71

I would recommend using a querySelector:

const element = getByTestID('').firstchild;

Upvotes: 0

sreejith
sreejith

Reputation: 78

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

Upvotes: 1

Related Questions