sinon fake server not working in React Native app

[andpor]

I am able to require sinon but looks like the network calls through SuperAgent are not getting intercepted by signon fake server ? Using 1.17.4

[fatso83]

If you are using React native you are not running in a browser, AFAIK. In that case, you won't be using native XHR either, which is what sinon is trying to replace. Correct me if I'm wrong.

[andpor]

Yes, it is not a browser environment. React Native provides a polyfill for XMLHttpRequest and thus makes possible using tools like SuperAgent for data loading.

Assumed sinon should be able to create a wrapper around the RN's XMLHttpRequest quite easily but it is not the case it seems...

[andpor]

It would be really great to have sinon work in RN env. Can't find any tool that we could use to serve up mock data in dev by plugging into the flow as easily as it could be done in sinon..

[fatso83]

You might get it to work, but it is not supported. You could supply a pull request, if you want it 😺

Regarding your last comment:
try using seams further up the chain instead of using a "catch all" network approach. Maybe stub SuperAgent or the code using it.

[andpor]

Actually mocking network data is precisely what my team needs. We want to make sure that all code gets executed but without the necessity to have a backend ready. As you know backend work is usually a domain of another team and it is never done in time...

I actually made sinon to work in RN last night. While it is not supported, it could be easily supported since xhr polyfill is there and SuperAgent runs on it without a hickup.

There is one line change actually in fake_xml_http_request...as long as you set supportsCORS to true for RN (which it does support but not by way of having withCredentials) the proper FakeXMLHttpRequest is created in fakeServer.create(). Current code erroneously creates FakeXDomainRequest..

This can be defaulted to true by way of checking window.navigator.product === "ReactNative"

The other fix is to polyfill window.location because in RN there is no window.location...so I hardcode

window.location = { "host" : "localhost", "protocol" : "http" }

This is used by rCurrLoc in fakeServer.js and seems like default to local to http://localhost works fine for all use cases...

so in fakeServer
wloc = (typeof wloc === "undefined") ? {} : wloc
or
wloc = (typeof wloc === "undefined") ? { "host" : "localhost", "protocol" : "http" } : wloc

This is it....sinon runs on RN - device or browser debug..

Having this work for RN would be huge...I submitted a PR...

[simonsmith]

I'm still seeing an error in RN with regard to this:

TypeError: Cannot read property 'protocol' of undefined

      at /Users/simonsmith/Sites/new-look/newlookapp/node_modules/sinon/lib/sinon/util/fake_server.js:39:41
      at Object.<anonymous> (node_modules/sinon/lib/sinon/util/fake_server.js:247:2)
      at loadDependencies (node_modules/sinon/lib/sinon/util/fake_server_with_clock.js:89:9)
      at /Users/simonsmith/Sites/new-look/newlookapp/node_modules/sinon/lib/sinon/util/fake_server_with_clock.js:97:9
      at Object.<anonymous> (node_modules/sinon/lib/sinon/util/fake_server_with_clock.js:101:2)

I'm using the latest stable Sinon - ^1.17.5

I'm just trying to use sinon.spy. Is there a way to use it without automatically mocking the XHR object?

[simonsmith]

One way is to avoid importing the main file as that automatically loads the XHR stuff:

import spy from '../../../node_modules/sinon/lib/sinon/spy';

This isn't very pretty though, so if anyone knows a nicer way I'd be glad to hear it :)

[andpor]

out of curiosity - what is the RN version you are using? We have not had such issue using RN 0.26. I do not recall we used imports though...

[fatso83]

@simonsmith : the work @andpor done has gone into what will be the next version (2.0) of Sinon (the master branch). Try npm install sinon@next to check it out.

[simonsmith]

@andpor I am using 0.32.0 which is the most recent release

@fatso83 Thanks for the suggestion. Unfortunately this throws a different error:

    TypeError: Cannot read property 'now' of undefined

      at setTimeout (node_modules/react-native/Libraries/JavaScriptAppEngine/System/JSTimers/JSTimers.js:50:45)
      at /Users/simonsmith/Sites/new-look/newlookapp/node_modules/lolex/src/lolex-src.js:32:25
      at Object.<anonymous> (node_modules/lolex/src/lolex-src.js:655:2)
      at Object.<anonymous> (node_modules/sinon/lib/sinon/util/fake_timers.js:20:11)

[andpor]

@simonsmith that error is completely unrelated to the xhr change.

[simonsmith]

Shall I open a separate issue?

[GeoffreyPlitt]

+1

[fatso83]

@GeoffreyPlitt that +1 serves no purpose. this issue is closed. there is no way of knowing if you meant to imply that you have been bitten by this bug, the #1143 bug or you wish to express a concurring opinion for something else. The "+😄" button is there for this reason, and it is also a way of doing the same with less noise ;-)

[jamesaspence]

Hi all - seeing this issue again on RN version 0.35. I'm currently using sinon@next (2.0.0-pre.4). Protocol is undefined, despite us having the default set on the ternary statement (var wloc = typeof window !== "undefined" ? window.location : { "host": "localhost", "protocol": "http"};).

If this matters, using jest for testing, version 16.0.1 (jest-react-native 16.0.0).

[fatso83]

@jamesaspence: please fill out a separate issue report and include some reproducible code, preferably the luxury version that includes a minimal repo that recreates the issue (git clone ...; npm test) 😃 As the work @andpor put into #1052 is supposed to cover this, I suspect you are seeing something slightly different, but I don't mind being proven wrong.

[jamesaspence]

Will do this when I get a chance. Thank you!