Блог

Главная - Вопросы по программированию - Как следить за тем, чтобы пользовательский хук реагировал на возвращаемое значение?

Как следить за тем, чтобы пользовательский хук реагировал на возвращаемое значение?

#reactjs #typescript #jestjs #react-hooks #react-hooks-testing-library

#reactjs #машинописный текст #jestjs #реагирующие крючки #реагировать-крючки-тестирование-библиотека

Вопрос:

Вот мой пользовательский хук: useCustomModal.ts

 export const useCustomModal = (modalType: string) => {
  const setModal = () => {
    // ... functionality here
  };

  const handleModalClose = (modalType: string) => {
    // ... functionality here
    setModal();
    // ...
  };

  return {
    handleModalClose,
    setModal,
  };
};

И вот мой тест:
useCustomModal.ts использовать

 import { act } from '@testing-library/react-hooks';

import { useCustomModal } from './useCustomModal';

describe('some', () => {
  it('a test', async () => {
    await act(async () => {
      const actions = useCustomModal('test');
      const spy = jest.spyOn(actions, 'setModal');
      actions.handleModalClose('test');
      expect(spy).toBeCalledTimes(1);
    });
  });
});

Сбой теста :
Ожидаемое количество звонков: 1
Количество принятых звонков: 0

Как правильно шпионить за пользовательскими крючками react?

Ответ №1:

Вам нужно использовать renderHook в сочетании с act . Что-то вроде этого:

 import { renderHook, act } from '@testing-library/react-hooks';

import { useCustomModal } from './useCustomModal';

describe('some', () => {
  it('a test', () => {
    const { result } = renderHook(() => useCustomModal('test'));
    const spy = jest.spyOn(result.current, 'setModal');
    act(() => {
      result.current.handleModalClose('test');
    });
    expect(spy).toBeCalledTimes(1);
  });
});