在自定义钩子中测试fetch.catch

Question

我有个定制的钩子

import React from 'react';
import { useMessageError } from 'components/Message/UseMessage';

export interface Country {
  code: string;
  name: string;
}

export default function useCountry(): Array<Country> {
  const [countries, setCountries] = React.useState<Country[]>([]);
  const { showErrorMessage } = useMessageError();

  React.useEffect(() => {
    fetch('/api/countries', {
      method: 'GET',
    })
      .then(data => data.json())
      .then(function(data) {
        // ..
      })
      .catch(() => showErrorMessage());
  }, []);

  return countries;
}

如果有无效的响应，我想测试捕捉错误。由于showErrorMessage()，应该会出现错误消息。我要做个测试：

const showErrorMessage = jest.fn();

jest.mock('components/Message/UseMessage', () => ({
  useMessageError: () => ({
    showErrorMessage: showErrorMessage,
  }),
}));

import useCountry from 'components/Country/useCountry';
import { renderHook } from '@testing-library/react-hooks';
import { enableFetchMocks } from 'jest-fetch-mock';
enableFetchMocks();

describe('The useCountry hook', () => {
  it('should show error message', async () => {
    jest.spyOn(global, 'fetch').mockImplementation(() =>
      Promise.resolve({
        json: () => Promise.reject(),
      } as Response),
    );

    const { result, waitForNextUpdate } = renderHook(() => useCountry());
    await waitForNextUpdate();

    expect(fetch).toHaveBeenCalled();
    expect(showErrorMessage).toHaveBeenCalled();
    expect(result.current).toEqual([]);
  });
});

但有了这个，我发现了一个错误：

超时-异步回调没有在jest.setTimeout.Timeout指定的5000 by超时内调用-异步回调没有在jest.setTimeout.Error指定的5000 by超时内调用。

我在这里做错了什么？我猜想它与await waitForNextUpdate();有某种联系，但我真的不知道如何处理它。

Answer 1

waitForNextUpdate()等待下一次更新，但是钩子不会触发它，因为它只调用showErrorMessage()。看看这个沙箱

作为一个简单的解决方案，可以添加一些触发更新的内容：

  React.useEffect(() => {
    fetch('/api/countries', {
      method: 'GET',
    })
      .then(data => data.json())
      .then(function(data) {
        // ..
      })
      .catch(() => { 
        showErrorMessage();
        // trigger update in any suitable way, for example:
        setCountries([]); 
      });
  }, []);

但在某种程度上重构它可能会更好。例如，对于错误，可以使用单独的钩子和状态：

export default function useCountry(): Array<Country> {
  const [countries, setCountries] = React.useState<Country[]>([]);
  const [error, setError] = React.useState(null);
  const { showErrorMessage } = useMessageError();

  React.useEffect(() => {
    fetch('/api/countries', {
      method: 'GET',
    })
      .then(data => data.json())
      .then(function(data) {
        // ..
      })
      .catch(() => setError(true));
  }, []);
  
  React.useEffect(() => {
    if (error) {
      showErrorMessage()
    }
  }, [error]);

  return countries;
}