react-nativetestingreact-hooksjestjsbabel-jest

React Native Jest testing timed out problem


My test file ;

import { renderHook, act } from '@testing-library/react-hooks';
import useInternetConnectivity from '../useInternetConnectivity';
import NetInfo from '@react-native-community/netinfo';

// NetInfo'yu mock'layın
jest.mock('@react-native-community/netinfo', () => ({
  fetch: jest.fn(),
  addEventListener: jest.fn(), // unsubscribe fonksiyonu döner
}));

describe('useInternetConnectivity hook', () => {
  it('should initially set isConnected to null', () => {
    NetInfo.fetch.mockResolvedValue({ isConnected: true });
    const { result } = renderHook(() => useInternetConnectivity());
    expect(result.current.isConnected).toBeNull();
  });

  it('should update isConnected when NetInfo.fetch resolves', async () => {
    NetInfo.fetch.mockResolvedValue({ isConnected: true });
    const { result, waitForNextUpdate } = renderHook(() => useInternetConnectivity());

    await waitForNextUpdate();

    expect(result.current.isConnected).toBe(true);
  });

});

My hook

import {useState, useEffect, useCallback} from 'react';
import NetInfo from '@react-native-community/netinfo';

function useInternetConnectivity() {
  console.log('Enter');
  const [isConnected, setIsConnected] = useState(null);
  console.log('Connection status, isConnected:',isConnected);

  const checkConnectivity = useCallback(() => {
    console.log('checkConnectivity enter');
    NetInfo.fetch().then(state => setIsConnected(state.isConnected),
    console.log('Connection status changed, isConnected:', state.isConnected));
  }, []);

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsConnected(state.isConnected);
    });

    return () => unsubscribe();
  }, []);

  return {
    isConnected,
    retry: checkConnectivity,
  };
}

export default useInternetConnectivity;

And here is the log;

src/lib/__test__/useInternetConnectivity.test.js
  ● Console

    console.log
      Enter

      at log (src/lib/useInternetConnectivity.js:5:11)

    console.log
      Connection status, isConnected: null

      at log (src/lib/useInternetConnectivity.js:7:11)

    console.log
      Enter

      at log (src/lib/useInternetConnectivity.js:5:11)

    console.log
      Connection status, isConnected: null

      at log (src/lib/useInternetConnectivity.js:7:11)

  ● useInternetConnectivity hook › should update isConnected when NetInfo.fetch resolves
                                                                                                                                                                                                             
    Timed out in waitForNextUpdate after 1000ms.                                                                                                                                                             
                                                                                                                                                                                                             
      at waitForNextUpdate (node_modules/@testing-library/react-hooks/lib/core/asyncUtils.js:96:13)  

Hello, I have just started learning unit testing. I wrote the test you see and I am encountering such a problem. Apparently, although we mocked isConnected, the isConnected value remains null in the hook and checkConnectivity never works. What should I do to solve the problem here? I am waiting for your help.Thank you!


Solution

  • Few things...

    1. retry from useInternetConnectivity is not an async function.
    2. and waitForNextUpdate is not part your hook response

    your test should have been:

      it('should update isConnected when NetInfo.fetch resolves', async () => {
        NetInfo.fetch.mockResolvedValue({ isConnected: true });
        const { result } = renderHook(() => useInternetConnectivity());
    
        result.current.retry();
    
        expect(result.current.isConnected).toBe(true);
      });