How to not pass testID to deeper component in Jest and React Testing Library

Viewed 15

Say i have the following custom component:

type MyCustomComponentProps = {
   a: string;
   b: number;
   testID?: string; // i want this to be checking these props
}

const MyCustomComponent = (props: MyCustomComponentProps) => {
    
    return // whatever
}

When i create the component in my screen i will make it like this:

<>
   <>
       <MyCustomComponent a={123} b={'something'} testID='my-test-id'/>
   <>
<>

and when testing, it will be

    // this fail because can't find the element
    expect(getByTestId('my-test-id').props.a).toBeStrictEqual(123)

how to fix this?

Update: So to make it clearer, i used the render screen that inside have my custom component. Then i want to use the query from the testing library's render to assert my component. like this:


it('bla bla bla',()=>{
    const {getByTestId} = render(<MyScreen/>);
    const myComponent = getByTestId('my-test-id');
})

0 Answers
Related