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');
})