使用 react-hooks-testing-library 在 React Hooks 中模擬 Axios

Question

試圖模擬對 API 的 GET 請求，但總是得到

超時 - 在 jest.setTimeout 指定的 10000 毫秒超時內未調用異步回調。

即使我增加了超時，它仍然會引發錯誤。

鈎

export default function apiCaller() {
  const [rawApiData, setRawApiData] = useState({});
  const [errorMsg, setErrorMsg] = useState('');

  const callApi = async (inputValue) => {
    try {
      const apiData= await axios.get(
        `https://cloud.iexapis.com/stable/stock/market/batch?types=chart&symbols=${inputValue}&range=3m&token=lalaccf0`
      );
      setRawApiData(apiData);
    } catch (err) {
      setErrorMsg(
        'Error occured!! ' +
          (Boolean(err.response) ? err.response.data : err.message)
      );
    }
  };

  return { rawApiData, callApi, errorMsg };
}

Axios 模擬

export default {
  get: jest.fn().mockResolvedValue({ data: {} }),
};

測試

import { renderHook, act } from 'react-hooks-testing-library';
import apiCaller from '../components/stock-chart/stockApiCaller';
import axios from 'axios';
jest.mock('axios');

it('should set error properly when api call is unsuccessfull because of bad data', async () => {

      axios.get.mockResolvedValueOnce({ data: { test: '123' } });
      const { result, waitForNextUpdate } = renderHook(() => apiCaller());

      act(() => result.current.callApi('fb/tsla'));
      await waitForNextUpdate();

      expect(result.current.rawApiData.data.test)
        .toBe(123)
    }, 10000);

Answer 1

我終於解決了這個問題。 有一種新的方法來編寫act()，即異步act()。 請在下面找到運行良好的測試的更新版本。

it('should set rawData properly when api call is successfull because of', async () => {
  axios.get.mockResolvedValueOnce({ data: { test: '123' } });
  const { result, waitForNextUpdate } = renderHook(() => apiCaller());
  await act(async () => {
    result.current.callApi('fb/tsla');
    await waitForNextUpdate();
  });
  expect(result.current.rawApiData.data.test).toBe('123');
});

更新對 16.9.0-alpha.0 的反應

https://github.com/facebook/react/releases/tag/v16.9.0-alpha.0