React Native support about miragejs HOT 13 CLOSED

This is all set! ✨

Check out the new quickstart guides here:

• Development
• Testing

from miragejs.

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!

from miragejs.

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!

from miragejs.

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.

from miragejs.

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

from miragejs.

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

from miragejs.

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

from miragejs.

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

from miragejs.

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

from miragejs.

Is this still being worked on?

from miragejs.

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

from miragejs.

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

from miragejs.

@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.

from miragejs.