Тестирование хука useEffect с помощью try / catch - PullRequest
Новая
       42

Тестирование хука useEffect с помощью try / catch

0 голосов
/ 27 мая 2020

Мне нужно проверить catch при получении отклоненных запросов данных, но я не понимаю, почему ошибка не обнаруживается, и я получил эту ошибку: UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

У меня такая ситуация: 

export const Container = ({fetchFirstAsset, fetchSecondAsset}) => {
  const [status, setStatus] = useState(null);

  async function fetchAssets() {
    setStatus(IN_PROGRESS);

    try {
      await fetchFirstAsset();
      await fetchSecondAsset()

      setStatus(SUCCESS);
    } catch {
      setStatus(FAILURE);
    }
  }

  useEffect(() => {
    fetchAssets();
  }, []);

  ....
};

И тестируйте следующим образом: 

import {mount} from 'enzyme';
import {act} from 'react-dom/test-utils';

const fetchFirstAsset = jest.fn();
const fetchSecondAsset = jest.fn();

it('should render without errors', async () => {
  fetchFirstAsset.mockReturnValueOnce(Promise.resolve());
  fetchSecondAsset.mockReturnValueOnce(Promise.reject());
  let component;

  await act(async () => {
    component = mount(
      <Container
        fetchFirstAsset={fetchFirstAsset}
        fetchSecondAsset={fetchSecondAsset}
      />
    );
  });

  expect(fetchSomething).toHaveBeenCalled();
});

Если я проверяю пример, когда fetchSomething разрешается с Promise.resolve(), все работает нормально, и тесты верны, но когда я пытаюсь Promise.reject() по порядку для проверки случая catch эта ошибка не обнаруживается, и у меня есть unhandled promise rejection. (Почему код выглядит так: в других местах приложения я обрабатываю изменение статуса с помощью redux, поэтому тестирование улова несложно, но в одном месте мне нужно получить 3 разных актива для компонента, и я решил обработать изменение статуса с помощью useState, потому что извлечение 3 разных статусов из redux и их объединение будет некрасиво, с useState, я думаю, намного чище)

Заранее спасибо за помощь! :)

1 Ответ

0 голосов
/ 27 мая 2020

вам нужно написать свой блок catch следующим образом: 

catch (e) {
     // can do something with e in here
      setStatus(FAILURE);
    }
...