CODEWITHSUNDEEP
javascriptreactjsaxiosreact-hooksreact-hooks-testing-library
Kodin
Kodin

Reputation: 812

Mocking Axios in React Hooks using react-hooks-testing-library

Trying to mock GET request to API but always get

Timeout - Async callback was not invoked within the 10000ms timeout specified by jest.setTimeout.

even though I increased the timeout it still throws error.

Hook

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 mock

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

Test 

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);

Upvotes: 2

Views: 3313

Answers (1)

Kodin
Kodin

Reputation: 812

I finally got the issue resolved. There is new way to write act() i.e. async act(). Please find below the updated version of test which works fine.

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');
});

Update react to 16.9.0-alpha.0

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

Upvotes: 1

Related Questions