React Native support

[hsavit1]

Is your feature request related to a problem? Please describe.
Does React Native have the ability to support this?

Describe the solution you'd like
Some guide to do something similar with react native

Describe alternatives you've considered
Can something custom be set up with https://github.com/Blitz-Mobile-Apps/react-native-bg-thread#readme ?

Additional context
Add any other context or screenshots about the feature request here.

[kettanaito]

I wonder if using setupServer in React Native would be enough. I'd appreciate if somebody could do a proof of concept with that.

[hsavit1]

do you think, for react native, that it could work for grahphql requests (via apollo client) as well?

[kettanaito]

@hsavit1, I believe so. It's a matter of understanding a request flow in React Native. I assume React Native app runs on Node, so that's why I've suggested to check if using setupServer doesn't intercept its requests already (that's the API that powers API mocking in Node).

As of GraphQL, it's not much different than a regular REST request. In fact, it is a regular REST request, just compliant with the GraphQL specification (has a query, optional variables, and so on).

[hsavit1]

I believe React Native has some access to Node.js APIs via the node-js mobile library. See this for more.

Read more about the javascript core here: https://reactnative.dev/docs/0.60/javascript-environment

[donovanhiland]

Stumbled across this issue while trying to set up a react native app to use msw for integration tests. I would love to help get this working for react-native outside of tests if someone could point me in the right direction.

[kettanaito]

Hey, @donovanhiland! We'd really appreciate your help, if you have a spare minute.

Could you please try using setupServer (regular integration with Node) in your React Native integration tests? Here's the documentation on the process. Since tests run in Node environment, that integration should work. But due to the difference of the platform, it may have some unexpected behavior.

Would love to hear how it goes from you.

[donovanhiland]

Absolutely! @kettanaito I was able to get setupServer working in my react-native apollo jest integration test environment. There was a small caveat for react-native tests where I had to set a global fetch implementation so msw could intercept. Otherwise fetch could not be found.

In trying to implement msw in the actual react native app it looks like it does not have access to core NodeJS modules without some extra work. I toyed with https://github.com/parshap/node-libs-react-native which got me past the missing module warnings, but am now running into:

Error: [MSW] Failed to execute `setupServer` in the environment that is not NodeJS (i.e. a browser). Consider using `setupWorker` instead.

There is no global process variable in the react-native environment

[hsavit1]

@donovanhiland @kettanaito is there a way to shim the node env using this?

[kettanaito]

Thanks for trying that out so quickly. Excited to hear that you got it to the working state!

There was a small caveat for react-native tests where I had to set a global fetch implementation so msw could intercept.

I think this is the gotcha for any Node tests that rely on fetch. Fetch implementation needs to be polyfilled.

There is no global process variable in the react-native environment

This is an interesting detail. Looks like we need to adjust our isNodeProcess function that validates your API usage against the environment. The question is: should we consider React Native as Node? It should definitely error on attemtpint to use setupWorker in React Native (no Service Worker API).

@hsavit1, that's a nice find! I'm concerned about the amount of modules this single import pulls in. It may have a high cost, which may affect the tests' performance. Perhaps, if we could also check for React Native environment by some distinct flag, we may omit relying on global.

[hsavit1]

@kettanaito this is a project that seems to be a bit more focused

[hsavit1]

There was a small caveat for react-native tests where I had to set a global fetch implementation so msw could intercept

@donovanhiland How did you do this?