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

Question

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

I get a failure because "123" isn't 123, plus some warnings about the call to act, not a timeout. — jonrsharpe
– jonrsharpe, Commented Jun 16, 2019 at 14:27
I will edit the question to assert to '123'. Also i dont get the timeout issue that you are getting. — Kodin
– Kodin, Commented Jun 16, 2019 at 14:34
...what? You're the one getting the timeout, that's what you've asked the question about; I'm not getting it. — jonrsharpe
– jonrsharpe, Commented Jun 16, 2019 at 14:34
My point is that currently you haven't provided a minimal reproducible example - I cannot recreate the issue you've asked about. — jonrsharpe
– jonrsharpe, Commented Jun 16, 2019 at 14:37

Kodin · Accepted Answer · 2019-06-16 15:28:14Z

1

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

answered Jun 16, 2019 at 15:28

Kodin

8129 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related