Use unmock on device in development

__tests__/App.test.tsx

@@ -1,6 +1,6 @@
 import 'react-native';
 import React from 'react';
-import App from '../src/App';
+import App, {mockCatFactAPI} from '../src/App';
 
 import unmock, {transform, u} from 'unmock';
 
@@ -15,16 +15,9 @@ import {
 // @ts-ignore
 global.fetch = require('node-fetch');
 
-// https://cat-fact.herokuapp.com/facts/random?animal_type=cat&amount=1
-
 describe('App', () => {
   beforeAll(() => {
-    unmock.on();
-    unmock
-      .nock('https://cat-fact.herokuapp.com', 'catFactApi')
-      .get('/facts/random?animal_type=cat&amount=1')
-      .reply(200, {text: u.string('lorem.sentence')})
-      .reply(500, 'Internal server error');
+    mockCatFactAPI(unmock);
   });
   beforeEach(() => {
     unmock.reset();

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "16.9.0",
-    "react-native": "0.61.2"
+    "react-native": "0.61.2",
+    "unmock": "^0.3.11"
   },
   "devDependencies": {
     "@babel/core": "^7.6.3",
@@ -26,8 +27,7 @@
     "metro-react-native-babel-preset": "^0.56.0",
     "node-fetch": "^2.6.0",
     "react-native-testing-library": "^1.11.1",
-    "react-test-renderer": "16.9.0",
-    "unmock": "^0.3.8"
+    "react-test-renderer": "16.9.0"
   },
   "jest": {
     "preset": "react-native",

src/App.tsx

@@ -1,12 +1,30 @@
 import React, {useState, useEffect} from 'react';
 import {Button, StyleSheet, View, Text} from 'react-native';
 import {Colors} from 'react-native/Libraries/NewAppScreen';
+import unmock from 'unmock-browser';
+import {u, UnmockPackage} from 'unmock';
 
-const CAT_FACT_URL =
-  'https://cat-fact.herokuapp.com/facts/random?animal_type=cat&amount=1';
+const useUnmock = process.env.NODE_ENV === 'development';
+
+export const CAT_FACT_API_URL = 'https://cat-fact.herokuapp.com';
+export const CAT_FACT_PATH = '/facts/random?animal_type=cat&amount=1';
+
+export const mockCatFactAPI = (unmock: UnmockPackage) => {
+  unmock.on();
+
+  unmock
+    .nock(CAT_FACT_API_URL, 'catFactApi')
+    .get(CAT_FACT_PATH)
+    .reply(200, {text: u.string('lorem.sentence')})
+    .reply(500, 'Internal server error');
+};
+
+if (useUnmock) {
+  mockCatFactAPI(unmock);
+}
 
 const fetchFact = async () => {
-  console.log(`Fetching new cat fact`);
+  const CAT_FACT_URL = `${CAT_FACT_API_URL}${CAT_FACT_PATH}`;
   const fetchResult = await fetch(CAT_FACT_URL);
   if (!fetchResult.ok) {
     throw Error(`Failed fetching cat fact with code: ${fetchResult.status}`);
@@ -29,7 +47,7 @@ const App = () => {
       setError(null);
       console.log(`Set fact: ${fact}`);
     } catch (err) {
-      console.error(`Failed fetching fact: ${err.message}`);
+      console.log(`Failed fetching fact: ${err.message}`);
       setError(err);
     } finally {
       setLoading(false);