Move rn-fetch-blob mock to it's own file

Use mockResolved* helpers where appropriate
Import rather than require('rn-fetch-blob')
Hacky wait for async component lifecycle methods to complete before tests finish ()

Author: mnightingale

tests/CacheableImage.test.js

@@ -8,6 +8,7 @@ import imageCacheHoc from '../src/imageCacheHoc';
 import { Image } from 'react-native';
 import sinon from 'sinon';
 import 'should-sinon';
+import RNFetchBlob from 'rn-fetch-blob';
 
 describe('CacheableImage', function () {
   it('HOC options validation should work as expected.', () => {
@@ -95,14 +96,11 @@ describe('CacheableImage', function () {
   });
 
   it('#cacheFile static method should work as expected for cache dir files.', () => {
-    // RNFetchBlob Mocks
-    const RNFetchBlob = require('rn-fetch-blob');
-
     // Mock that file does not exist on local fs.
-    RNFetchBlob.fs.exists.mockReturnValue(false);
+    RNFetchBlob.fs.exists.mockResolvedValue(false);
 
     // Mock fetch result
-    RNFetchBlob.fetch.mockReturnValue({
+    RNFetchBlob.fetch.mockResolvedValue({
       path: () => {
         return '/this/is/path/to/file.jpg';
       },
@@ -122,14 +120,11 @@ describe('CacheableImage', function () {
   });
 
   it('#cacheFile static method should work as expected for permanent dir files.', () => {
-    // RNFetchBlob Mocks
-    const RNFetchBlob = require('rn-fetch-blob');
-
     // Mock that file does not exist on local fs.
-    RNFetchBlob.fs.exists.mockReturnValue(false);
+    RNFetchBlob.fs.exists.mockResolvedValue(false);
 
     // Mock fetch result
-    RNFetchBlob.fetch.mockReturnValue({
+    RNFetchBlob.fetch.mockResolvedValue({
       path: () => {
         return '/this/is/path/to/file.jpg';
       },
@@ -150,11 +145,8 @@ describe('CacheableImage', function () {
   });
 
   it('#flush static method should work as expected.', () => {
-    // RNFetchBlob Mocks
-    const RNFetchBlob = require('rn-fetch-blob');
-
     // Mock unlink to always be true.
-    RNFetchBlob.fs.unlink.mockReturnValue(true);
+    RNFetchBlob.fs.unlink.mockResolvedValue(true);
 
     const CacheableImage = imageCacheHoc(Image);
 
@@ -354,7 +346,7 @@ describe('CacheableImage', function () {
     });
   });
 
-  it('#render with valid props does not throw an error.', () => {
+  it('#render with valid props does not throw an error.', async () => {
     const CacheableImage = imageCacheHoc(Image);
 
     const cacheableImage = new CacheableImage(mockData.mockCacheableImageProps);
@@ -364,5 +356,7 @@ describe('CacheableImage', function () {
     cacheableImage.state.localFilePath = './test.jpg';
 
     cacheableImage.render();
+
+    await new Promise((r) => setTimeout(r, 100)); // Hacky wait for lifecycle functions to complete
   });
 });

tests/FileSystem.test.js

@@ -6,6 +6,7 @@ import should from 'should'; // eslint-disable-line no-unused-vars
 import FileSystemFactory, { FileSystem } from '../src/FileSystem';
 import pathLib from 'path';
 import { mockData } from './mockData';
+import RNFetchBlob from 'rn-fetch-blob';
 
 describe('FileSystem', function () {
   // Test static class properties and methods
@@ -69,7 +70,6 @@ describe('FileSystem', function () {
   });
 
   it('#exists mocked as true.', () => {
-    const RNFetchBlob = require('rn-fetch-blob');
     RNFetchBlob.fs.exists.mockReturnValue(true);
 
     const fileSystem = FileSystemFactory();
@@ -128,71 +128,63 @@ describe('FileSystem', function () {
     fetch = jest.fn(); // eslint-disable-line no-global-assign
 
     // Test PNG
-    fetch.mockReturnValueOnce(
-      Promise.resolve({
-        headers: {
-          get: (headerName) => {
-            headerName.should.equals('content-type');
-
-            return 'image/png';
-          },
+    fetch.mockResolvedValueOnce({
+      headers: {
+        get: (headerName) => {
+          headerName.should.equals('content-type');
+
+          return 'image/png';
         },
-      })
-    );
+      },
+    });
 
     const pngFilename = await fileSystem.getFileNameFromUrl(
       'https://cdn2.hubspot.net/hub/42284/file-14233687-jpg/images/test_in_red'
     );
     pngFilename.should.equal('831eb245a3d9032cdce450f8760d2b8ddb442a3d.png');
 
     // Test JPG
-    fetch.mockReturnValueOnce(
-      Promise.resolve({
-        headers: {
-          get: (headerName) => {
-            headerName.should.equals('content-type');
-
-            return 'image/jpeg';
-          },
+    fetch.mockResolvedValueOnce({
+      headers: {
+        get: (headerName) => {
+          headerName.should.equals('content-type');
+
+          return 'image/jpeg';
         },
-      })
-    );
+      },
+    });
 
     const jpgFilename = await fileSystem.getFileNameFromUrl(
       'https://cdn2.hubspot.net/hub/42284/file-14233687-jpg/images/test_in_red'
     );
     jpgFilename.should.equal('831eb245a3d9032cdce450f8760d2b8ddb442a3d.jpg');
 
     // Test GIF
-    fetch.mockReturnValueOnce(
-      Promise.resolve({
-        headers: {
-          get: (headerName) => {
-            headerName.should.equals('content-type');
-
-            return 'image/gif';
-          },
+    fetch.mockResolvedValueOnce({
+      headers: {
+        get: (headerName) => {
+          headerName.should.equals('content-type');
+
+          return 'image/gif';
         },
-      })
-    );
+      },
+    });
 
     const gifFilename = await fileSystem.getFileNameFromUrl(
       'https://cdn2.hubspot.net/hub/42284/file-14233687-jpg/images/test_in_red'
     );
     gifFilename.should.equal('831eb245a3d9032cdce450f8760d2b8ddb442a3d.gif');
 
     // Test BMP
-    fetch.mockReturnValueOnce(
-      Promise.resolve({
-        headers: {
-          get: (headerName) => {
-            headerName.should.equals('content-type');
-
-            return 'image/bmp';
-          },
+    fetch.mockResolvedValueOnce({
+      headers: {
+        get: (headerName) => {
+          headerName.should.equals('content-type');
+
+          return 'image/bmp';
         },
-      })
-    );
+      },
+    });
 
     const bmpFilename = await fileSystem.getFileNameFromUrl(
       'https://cdn2.hubspot.net/hub/42284/file-14233687-jpg/images/test_in_red'
@@ -201,7 +193,6 @@ describe('FileSystem', function () {
   });
 
   it('#getLocalFilePathFromUrl should return local filepath if it exists on local fs in permanent dir.', () => {
-    const RNFetchBlob = require('rn-fetch-blob');
     RNFetchBlob.fs.exists
       .mockReturnValueOnce(true) // mock exist in local permanent dir
       .mockReturnValue(true);
@@ -221,7 +212,6 @@ describe('FileSystem', function () {
   });
 
   it('#getLocalFilePathFromUrl should return local filepath if it exists on local fs in cache dir.', () => {
-    const RNFetchBlob = require('rn-fetch-blob');
     RNFetchBlob.fs.exists
       .mockReturnValueOnce(false) // mock not exist in local permanent dir
       .mockReturnValueOnce(true) // mock exist in local cache dir
@@ -242,7 +232,6 @@ describe('FileSystem', function () {
   });
 
   it('#getLocalFilePathFromUrl should download file and write to disk (default to cache dir) if it does not exist on local fs.', () => {
-    const RNFetchBlob = require('rn-fetch-blob');
     RNFetchBlob.fs.exists
       .mockReturnValueOnce(false) // mock not exist in local permanent dir
       .mockReturnValueOnce(false) // mock not exist in local cache dir
@@ -291,7 +280,6 @@ describe('FileSystem', function () {
   it('#fetchFile clobber safeguard should work.', () => {
     const fileSystem = FileSystemFactory();
 
-    const RNFetchBlob = require('rn-fetch-blob');
     RNFetchBlob.fetch.mockReturnValue({
       path: () => {
         return '/this/is/path/to/file.jpg';
@@ -320,7 +308,6 @@ describe('FileSystem', function () {
   it('#fetchFile prune logic should not be called on permanent writes.', () => {
     const fileSystem = FileSystemFactory();
 
-    const RNFetchBlob = require('rn-fetch-blob');
     RNFetchBlob.fetch.mockReturnValue({
       path: () => {
         return '/this/is/path/to/file.jpg';
@@ -350,7 +337,6 @@ describe('FileSystem', function () {
   it('#fetchFile prune logic should be called on cache writes.', () => {
     const fileSystem = FileSystemFactory();
 
-    const RNFetchBlob = require('rn-fetch-blob');
     RNFetchBlob.fetch.mockReturnValue({
       path: () => {
         return '/this/is/path/to/file.jpg';
@@ -380,7 +366,6 @@ describe('FileSystem', function () {
   it('#fetchFile should work as expected.', () => {
     const fileSystem = FileSystemFactory();
 
-    const RNFetchBlob = require('rn-fetch-blob');
     RNFetchBlob.fetch.mockReturnValue({
       path: () => {
         return '/this/is/path/to/file.jpg';
@@ -433,7 +418,6 @@ describe('FileSystem', function () {
 
   it('#unlink should work as expected for valid paths.', () => {
     // RNFetchBlob Mocks
-    const RNFetchBlob = require('rn-fetch-blob');
 
     // Mock unlink to be true.
     RNFetchBlob.fs.unlink.mockReturnValueOnce(true);

tests/__mocks__/rn-fetch-blob.js

@@ -0,0 +1,65 @@
+const { mockData } = require('../mockData');
+
+module.exports = {
+  fs: {
+    dirs: {
+      CacheDir: mockData.basePath,
+      DocumentDir: mockData.basePath,
+    },
+    exists: jest.fn(),
+    lstat: () => {
+      let lstat = [
+        {
+          size: '43663',
+          path:
+            mockData.basePath +
+            '/cache/0fbbfec764c73ee5b4e3a0cb8861469bc9fc6c8c.jpg',
+          filename: '0fbbfec764c73ee5b4e3a0cb8861469bc9fc6c8c.jpg',
+          lastModified: 1508878829000,
+          type: 'file',
+        },
+        {
+          size: '9000000',
+          path:
+            mockData.basePath +
+            '/cache/6865fd0a65771b0044319f562873cc7b145abb4a.jpg',
+          filename: '6865fd0a65771b0044319f562873cc7b145abb4a.jpg',
+          lastModified: 1508877930000,
+          type: 'file',
+        },
+        {
+          size: '14133330',
+          path:
+            mockData.basePath +
+            '/cache/b003269c377af6a2f53f59bc127a06c86f54312b.jpg',
+          filename: 'b003269c377af6a2f53f59bc127a06c86f54312b.jpg',
+          lastModified: 1508877698000,
+          type: 'file',
+        },
+        {
+          size: '1684',
+          path:
+            mockData.basePath +
+            '/cache/d1052b9f22c1f00f4d658224f4295307b97db69f.jpg',
+          filename: 'd1052b9f22c1f00f4d658224f4295307b97db69f.jpg',
+          lastModified: 1508877954000,
+          type: 'file',
+        },
+        {
+          size: '65769',
+          path:
+            mockData.basePath +
+            '/cache/faf4e58257d988ea6eab23aee5e5733bff9b2a9e.jpg',
+          filename: 'faf4e58257d988ea6eab23aee5e5733bff9b2a9e.jpg',
+          lastModified: 1509634852000,
+          type: 'file',
+        },
+      ];
+
+      return lstat;
+    },
+    unlink: jest.fn(),
+  },
+  config: jest.fn().mockReturnThis(),
+  fetch: jest.fn(),
+};

tests/__snapshots__/imageCacheHoc.test.js.snap

@@ -22,6 +22,11 @@ exports[`CacheableImage renders correctly 1`] = `
     Test CacheableImage Component
   </Text>
   <Image
+    source={
+      Object {
+        "uri": "/this/is/path/to/file.jpg",
+      }
+    }
     style={
       Object {
         "height": 204,
@@ -86,6 +91,26 @@ exports[`CacheableImage renders correctly with placeholder prop set 1`] = `
   >
     Test CacheableImage Component
   </Text>
-  <Image />
+  <Image
+    placeholder={
+      Object {
+        "component": [Function],
+        "props": Object {
+          "style": undefined,
+        },
+      }
+    }
+    source={
+      Object {
+        "uri": "/this/is/path/to/file.jpg",
+      }
+    }
+    style={
+      Object {
+        "height": 204,
+        "width": 150,
+      }
+    }
+  />
 </View>
 `;