Working on writing a unit test for a large component. I've written one before for a smaller component, but this has several other custom components nested inside. I'm trying to select it so I can then figure out what to do with it, but I can't even get to that point right now.
<Counter
/>
<MainComponentRange testID='range' />
<Counter
/>
it('should be able to change the ranfe', () =>{
//Mock out dependent function with jest
//Nothing here right now...
//Render with the props you want
const { getByTestId } = render(
<MainComponent />
);
//Locate screen components for test
const range = getByTestId('range');
//Perform user actions
fireEvent.changeText(range, "01/22/2022");
//Measure against expect cases
expect(dateRange).toBe("1/22/2022");
});
And this is the error message I'm getting:
● Main Component Test › should be able to change the range
Unable to find an element with testID: dateRange
143 |
144 | //Locate screen components for test
> 145 | const dateRange = getByTestId('range');
| ^
146 |
147 |
You need to pass the testID to the component as props and then add it the the view you are using I will add a simple example.
const App = () => {
return <PriceOverrideDateRange testID="dateRange" />
}
const PriceOverrideDateRange = ({testID}) => {
return <View testID="dateRange" ><Text>Hello</Text></View>
}