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.
PriceOverride.tsx
This is a part of what's getting rendered by the component. PriceOverrideDateRange is another custom component, and I'm trying to target it with the testID<Counter containerMargin={{ marginTop: -5 }} defaultCounter={itemCount} labelText={t('priceMultiple')} onSelectCounter={itemQuantity} min={1} /><PriceOverrideDateRange testID='dateRange' startDate={startDate} endDate={endDate} onSelectDateRange={onChangeDateInterval} /><Counter containerMargin={{ marginTop: -5 }} defaultCounter={labelCount} labelText={t('common:labelQuantity')} onSelectCounter={labelQuantity} />
PriceOverride.test.tsx
This is the part of the test I'm working on it('should be able to change the date interval', () =>{ const navContextValue: any = { isFocused: () => false, addListener: jest.fn(() => jest.fn()) }; //Mock out dependent function with jest //Nothing here right now... //Render with the props you want const { getByTestId } = render( <Provider store={store}><NavigationContext.Provider value={navContextValue}><PriceOverride navigation={props.navigation}/></NavigationContext.Provider></Provider>, ); //Locate screen components for test const dateRange = getByTestId('dateRange'); //Perform user actions fireEvent.changeText(dateRange, "01/22/2022"); //Measure against expect cases expect(dateRange).toBe("1/22/2022"); });
And this is the error message I'm getting:
● Price Details Test › should be able to change the date interval Unable to find an element with testID: dateRange 143 | 144 | //Locate screen components for test> 145 | const dateRange = getByTestId('dateRange'); | ^ 146 | 147 |