How to test code that depends on RNFetchBlob

[neiker]

If I want to test a module and that module includes RNFetchBlob, I get this:
react-native-fetch-blob/index.js:6 import { ^^^^^^ SyntaxError: Unexpected token import

That's because babel-core/register don't transpire code within node_modules by default. It I change the config to do it, as it's mentioned here, it crash in this line because NativeModules.RNFetchBlob it's undefined. I get stuck there so I change my es6 include to this dirty piece of code:

let RNFetchBlob;
if (process.env.NODE_ENV !== 'test') {
  // eslint-disable-next-line global-require
  RNFetchBlob = require('react-native-fetch-blob').default;
}

Any ideas how to solve this?

This is my test script:
NODE_ENV='test' mocha 'app/**/__tests__/*.js' --compilers js:babel-core/register --require mocha_setup.js

[layik]

I am using Facebook's Jest and I get the same error.

    TypeError: Cannot read property 'DocumentDir' of undefined
      
      at Object.<anonymous> (node_modules/react-native-fetch-blob/fs.js:25:24)
      at Object.<anonymous> (node_modules/react-native-fetch-blob/index.js:20:9)

I did try mocking the module, but then I use a constant Blob from RNFetchBlob.polyfill.Blob that then fails the test as it will be "undefined".

Thanks.

[ohtangza]

I am also experiencing the same error; "TypeError: Cannot read property 'DocumentDir' of undefined"

[rahimrahman]

@neiker @layik @ohtangza have you guys been able to remedy this issue? I'm having the same issue.

cc: @wkh237

[neiker]

@rahimrahman nop, I just include RNFB conditionally based on NODE_ENV

[jnrepo]

You have to mock the library. Was using the react-native-img-cache library which had a dependency to react-native-fetch-blob, so my jest is mocking that module.

EX:

jest.mock('react-native-img-cache', () => {
  return {
    DocumentDir: () => {},
    ImageCache: {
      get: {
        clear: () => {}
      }
    }
  }
})

[leyuan]

Agreed with @jnrepo, the key is to mock the objects you are accessing in your code, code work for me

jest.mock('react-native-fetch-blob', () => {
  return {
    DocumentDir: () => {},
    polyfill: () => {},
  }
});

[scerelli]

I created a file inside the __mocks__ folder called react-native-fetch-blob.js and i mocked all the keys this way:

jest.mock('react-native-fetch-blob', () => {
  return {
    DocumentDir: () => {},
    fetch: () => {},
    base64: () => {},
    android: () => {},
    ios: () => {},
    config: () => {},
    session: () => {},
    fs: () => {},
    wrap: () => {},
    polyfill: () => {},
    JSONStream: () => {}
  };
});

but i still get an error related to the dir constants:
TypeError: Cannot read property 'dirs' of undefined

any idea?

[SoundBlaster]

@scerelli try this

  return {
    DocumentDir: () => {},
    fetch: () => {},
    base64: () => {},
    android: () => {},
    ios: () => {},
    config: () => {},
    session: () => {},
    fs: {
      dirs: {
        MainBundleDir: () => {},
        CacheDir: () => {},
        DocumentDir: () => {},
      },
    },
    wrap: () => {},
    polyfill: () => {},
    JSONStream: () => {}
  }
})```

[scerelli]

thx @SoundBlaster but this doesn't solve the error.

[aofeng2009]

+1,After reinstall, delete app,restart, also failed.

edit
When I make another configuration in my Podfile. Now everything is ok.

[jnrepo]

@scerelli mines setup this way

in package.json:

"jest": {
    "preset": "react-native",
    "setupFiles": [
      "./test/setup.js"
    ],
    "coveragePathIgnorePatterns": [
      "/test/"
    ],
    "moduleFileExtensions": [
      "js",
      "json"
    ]
  }

in test/setup.js:

jest.mock('react-native-img-cache', () => {
  return {
    DocumentDir: () => {},
    ImageCache: {
      get: {
        clear: () => {}
      }
    }
  }
})

react-native-img-cache was the module using the react-native-fetch-blob. Perhaps its not react-native-fetch-blob, but another module thats using it?