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!
Few things...
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);
});