React Native: Simulate offline device in Jest unit test

Question

I'm writing a React Native app and I'm using Jest to unit test my code.

I've written a function than checks if there is an internet connection. I know want to write it's unit tests. I'm stuck, because I can't figure out how to mock the connection state of the device in a unit test.

How would you simulate that the device is offline or online in a unit test?

Edit:

Here is the function:

import { NetInfo } from "react-native";
import { NO_NETWORK_CONNECTION } from "../../../../config/constants/errors";

const checkNetwork = (): Promise<boolean | string> =>
  new Promise((resolve, reject) => {
    NetInfo.isConnected
      .fetch()
      .then(isConnected => (isConnected ? resolve(true) : reject(NO_NETWORK_CONNECTION)))
      .catch(() => reject(NO_NETWORK_CONNECTION));
  });

export default checkNetwork;

And I would like to test it in my test to see if it correctly resolves with true if the device is connected and rejects with the string, if the request fails. For that I need to simulate the devices connection in my unit tests.

score 5 · Accepted Answer · answered Oct 04 '18 at 19:14

5

This is pretty simple, just mock the NetInfo like so:

import {
    NetInfo
} from "react-native";
import checkNetwork from "...";
import {
    NO_NETWORK_CONNECTION
} from "...";

jest.mock('react-native', () => ({
    NetInfo: {
        isConnected: {
            fetch: jest.fn()
        }
    }
}))

test('test offline', async () => {
    NetInfo.isConnected.fetch.mockResolvedValueOnce(false)
    expect(await checkNetwork()).toBe(NO_NETWORK_CONNECTION)
})

test('test online', async () => {
    NetInfo.isConnected.fetch.mockResolvedValueOnce(true)
    expect(await checkNetwork()).toBe(true)
})

answered Oct 04 '18 at 19:14

Herman Starikov

2,636
15
26

Works like a charm, thank you very much! Only problem is, since I'm using TypeScript, I get the warning: `[ts] Property 'mockResolvedValueOnce' does not exist on type '() => Promise'.` Do you have any idea how to fix this? – J. Hesters Oct 05 '18 at 11:34
And further more follow up question: How do would I mock this function in other tests where I use it? If you could answer these questions I would be super grateful! – J. Hesters Oct 05 '18 at 11:50
I have faced the typescript error myself, and could not find anything more reasonable than `(NetInfo.isConnected.fetch as jest.Mock).mockResolvedValueOnce(false)`. – Herman Starikov Oct 05 '18 at 12:57
To reuse the mock, you can use `__mocks__` directory. Check out https://jestjs.io/docs/en/manual-mocks#mocking-user-modules – Herman Starikov Oct 05 '18 at 12:58
I tried that, but the problem is the test still uses the non-mocked function. Would you mind giving an example how you would do that? I could only get my other test that use `checkNetwork` to work by mocking NetInfo just like in you example. I would love to get `__mocks__` to work. – J. Hesters Oct 05 '18 at 14:13
I'm not sure how to fit that in a comment. I recommend you to create another stack overflow question for this. – Herman Starikov Oct 05 '18 at 14:29
1

I will, thank you for your help, you are helping me so much! I just have to wait 80 more minutes, because I just asked [this](https://stackoverflow.com/questions/52668469/react-node-node-not-found-while-testing-with-jest-and-enzyme) other question about testing in TypeScript. – J. Hesters Oct 05 '18 at 15:03
I wrote a question for the `__mocks__` situation. Could you please have a look at it? Thank you! https://stackoverflow.com/questions/52673113/how-to-use-mocks-in-a-react-native-project-with-jest – J. Hesters Oct 05 '18 at 20:49

React Native: Simulate offline device in Jest unit test

1 Answers1

Linked