React Native support

[FLGMwt]

React Native's network stack is pretty compatible with the browser's so I don't think it would be much of a stretch to officially support React Native.

I was able to get a minimal example working with a few tweaks:

1. Mirage and Pretender both assume self is available. Using RN-browser-polyfill to expose global as self before importing mirage fixed this. We could guard against this, but the polyfill seems to be a common enough solution for this in RN.
2. Pretender uses document.createElement('a') to parse URLs which isn't available in mobile. I "fixed" this by patching mirage's umd'd parseUrl to fall back to url-parse. This should be fixed upstream or we can at least move the patch to mirage itself.

@samselikoff mentioned some de-pretenderingthat's happening for node support, so that may also be an option 💯

[samselikoff]

This is so awesome! I'm glad to see it was relatively easy to get working with React Native as several folks have been asking about it. Thanks for putting this together 👍

We are decoupling Mirage from Pretender so it can be new'd up in a node environment. We're also going to be adding two new APIs, server.canHandle(method, url) and server.handleRequest(request), so Mirage can be used on its own without auto-starting Pretender (or any "interceptor"). However, looking at your PR I do think Pretender would still make the most sense as the "interceptor" for React Native, given its closest to a browser-like environment.

All that to say, I think your patch makes a ton of sense for Pretender and would just help eliminate more weird edge cases that pop up in the uncanny, browser-like-but-not-really situations. I think we should try to get it upstreamed to Pretender!

[FLGMwt]

aye-aye! PR'd so 🤞: pretenderjs/pretender#267

Thanks for this project! I've been wanting something like this forever. Excited to help out and watch it grow

[zomars]

I'm coming daily to check on this issue! 🙌

[clsk]

Is this still being worked on?

[davisgreg1]

Also interested to know if it's still being worked on.

[samselikoff]

Lots of folks have been asking so it is on our list! Still catching up on some issues since the site launch but we should push forward on this.

Looks like the Pretender issue would be the next step if someone wants to pick that up. New PR that copies the code might be the fastest way to get it moving so no one is blocked!

[eluciano11]

Hi 👋 I'm currently using Mirage for a React Native app and I ran into some issues while writing some tests.

In order to make Mirage work I did the following:

1. Import react-native-browser-polyfill into my jest.setup.js file.
2. Install xmlhttprequest, import it my jest.setup.js and assign it to global.XMLHttpRequest.
3. Assign an empty object to global.window. I had to do this because it seems like Mirage doesn't create a Pretender instance if window is undefined.

The jest.setup.js file ended up looking like this:

import 'react-native-browser-polyfill';
import '@testing-library/jest-native/extend-expect';

global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
global.window = {};

After doing that I was able to create a server instance on my tests, define the different responses for the same endpoint and verify that pretender had handled the network requests as expected.

Hope that the steps shared above will help others use Mirage on their app until official support lands!

@samselikoff I think I'll have time this week to help out with the original PR that was created on the Pretender repo.

[samselikoff]

Awesome, thanks so much! Getting your instructions into a QuickStart would also be 💯

[eluciano11]

I'd be happy to add a PR to the site repo with the QuickStart guide.

[ajsmth]

I was able to get a minimal example working with a few tweaks:

if anyone is curious about trying this - i had to update the pretender node_module package and use patch-package - looks like its working great. spent a good amount of time trying to figure out why my node_module modifications weren't working until i realized i was updating the wrong dependency

[eluciano11]

It's also worth mentioning that the instructions shared for testing #104 (comment) will also need the Pretender fix.

Hopefully we can land the Pretender update soon. I created a PR on Monday and I'm waiting for some feedback from the maintainers. pretenderjs/pretender#288

[eluciano11]

@samselikoff I'll also try to land a PR in Pretender to remove the dependency of react-native-browser-polyfill. I think that will give developers a better experience and it would make the testing setup process simpler as well.

[samselikoff]

This is all set! ✨

Check out the new quickstart guides here:

• Development
• Testing