I'm trying to renders items, but due to a custom hook (useBicycles), the map method passes through an empty array. How i can to test this?
My component:
function Items(props: Props) {
const { bicycles } = props;
const filteredBicycles = useBicycles(bicycles);
return (
<div className="items" data-testid="items">
{filteredBicycles.map((item) => {
return <Item item={item} key={uuidv4()} />;
})}
</div>
);
}
My test:
test('renders itself with data without filters', async () => {
renderWithRedux(<Items bicycles={fakeData} isLoading={false} />, FakeInitialState);
const itemsElem = screen.getByTestId('items');
expect(itemsElem).toBeInTheDocument();
const items = await screen.findAllByTestId('item'); <<< ERROR NOT FOUNDED ITEM
expect(items.length).toEqual(QUANTITY_PRODUCTS);
});
Custom hook useBicycles:
It should return filtered array based on the values from store but result in the test I get empty array. If I remove the hook call in the component then everything renders normally.
export const useBicycles = (bicycles: IBicycle[]) => {
const { searchValue } = useAppSelector((state) => state.searchReducer);
const { sortOption } = useAppSelector((state) => state.sortReducer);
let filteredBicycles = bicycles;
// search
filteredBicycles = useMemo(() => {
return bicycles.filter((item) => {
return item.name.toLowerCase().includes(searchValue.toLowerCase());
});
}, [searchValue, bicycles]);
// sorting
filteredBicycles = useMemo(() => {
switch (sortOption) {
case SortOptions.name_asc:
return [...filteredBicycles].sort((a, b) => a.name.localeCompare(b.name));
case SortOptions.name_desc:
return [...filteredBicycles].sort((a, b) => b.name.localeCompare(a.name));
case SortOptions.price_asc:
return [...filteredBicycles].sort((a, b) => a.price - b.price);
case SortOptions.price_desc:
return [...filteredBicycles].sort((a, b) => b.price - a.price);
case SortOptions.quantity_asc:
return [...filteredBicycles].sort((a, b) => a.quantity - b.quantity);
case SortOptions.quantity_desc:
return [...filteredBicycles].sort((a, b) => b.quantity - a.quantity);
default:
return filteredBicycles;
}
}, [sortOption, filteredBicycles]);
return filteredBicycles;
};