How to test react component with custom hook

Viewed 44

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;
};
0 Answers
Related