Почему пропс в компоненте приходит undefined, хотя в тесте он передан?

Question

[GNG999]

Здравствуйте есть компонент

export const Listing = ({
  items = [],
  hasItems,
  isFetching,
  observerHandler = noop,
  onEndOfListReached,
  isBottomLoader,
  onLoadImageItems,
  onActionsButtonClick = noop,
  productViewHandler,
}: Props):   React.ReactElement => {
  const endOfListRef = useRef(null);
  const viewedItems = useRef<Array<number>>([]).current;
  const imageLoadTimes = useRef<Array<number>>([]).current;

  useEffect(() => {
    if (!isFetching && isFunction(observerHandler)) {
      observerHandler(endOfListRef.current, onEndOfListReached);
    }
  }, [endOfListRef, isFetching]);
  
  const deferredCallback = useCallback(debounce(() => {
    isFunction(productViewHandler) && productViewHandler(viewedItems);
    viewedItems.length = 0;
  }, 1000), [productViewHandler]);
{
          hasItems
          && items.map(item => (
            <ListItem
              hasItems
              updateItemViewed={(viewedSid: number) => {
                if (viewedSid) {
                  viewedItems.push(viewedSid);
                  console.log('updateItemViewed', deferredCallback())
                  deferredCallback();
                }
              }}
            />
          ))}
}

тест этого компонента

jest.mock('../../list-item/list-item', () => {
  const original = jest.requireActual('../../list-item/list-item');
  return {
    ...original,
    __esModule: true,
    default: jest.fn(original.default),
  };
});

  it('should call productViewHandler', async () => {
    jest.useFakeTimers();
    const spy = jest.fn();
    const { container, rerender } = render(<Provider store={createStore(() => ({}))}>
      <Listing
        items={items}
        hasItems
        productViewHandler={spy}
      />
    </Provider>);
    console.log((ListItem as any).mock.calls[0][0].updateItemViewed);
    (ListItem as any).mock.calls[0][0].updateItemViewed(1)
    jest.runOnlyPendingTimers();
    expect(spy).toHaveBeenCalledTimes(1);
  });

почему при запуске теста в компоненте пропс productViewHandler приходит как undefined , в тесте я же передаю его

Comments

[Сергей Сергей]

debounce надо над useCallback.
https://qna.habr.com/q/1118688 здесь чё-то пыхтели пытались, вроде решили.

[WbICHA]

Сергей Сергей,

debounce надо над useCallback.

Что за бред? В нём тогда нет смысла. Дебоунс должен быть внутри юзМемо внутри стрелочной.

[Сергей Сергей]

WbICHA, там, по ссылке, вроде сработало.
Я не понимаю, как конкретно мемоизация в useCallback происходит, но раз возникает проблема с аргументами...

[WbICHA]

Сергей Сергей, чёт у вас там вообще намудрено.
В целом, юзКалбек — это короткая запись юзМемо для частного случая (функций).

useCallback(() => {}, [...])
// =
useMemo(() => {
  return () => {}
}, [...])

Там есть некоторые нюансы, но в данном случае они не играют роли.

Дебоунс функции должны быть тут:

useMemo(() => {
  return debounce(() => {})
}, [...])

А подобную запись через юзКалбек никак не сделать. То, что сейчас у автора, можно сравнить с подобными говнокодиками:
useTimeout(func(), 1000)

[Сергей Сергей]

WbICHA, сработал с тем, что увидел. Был бы там useECMAscript, было бы debounce( useECMAscript( `script` ), [] ) .

и вообще

я реакт по вопросам и комментариям "изучаю", прицениваюсь.

[GNG999]

WbICHA, напишите ваш вариант не говнокодика

[WbICHA]

GNG999, я уже всё написал выше.

[GNG999]

меня интересует почему пропс productViewHandler передается со значением spy но в компоненте не определяется