Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds Rest React Native example #60

Open
wants to merge 13 commits into
base: main
Choose a base branch
from

Conversation

taylorkline
Copy link

@taylorkline taylorkline commented Jul 18, 2021

Introduction

Hi! I've seen you request assistance getting in an example in mswjs/msw#269, mswjs/msw#622, and mswjs/msw#203 for React Native. Here it finally is.

Changes

This PR, when finalized, adds a Rest React Native example for reference and smoke testing.

TODO

  • When the directory rest-react-native is within examples/examples, yarn pods errors with the following output:
Bundle complete! 1 Gemfile dependency, 38 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

[!] Invalid `Podfile` file: cannot load such file -- /Users/taylor/Desktop/msw-examples/examples/rest-react-native/node_modules/@react-native-community/cli-platform-ios/native_modules.

 #  from /Users/taylor/Desktop/msw-examples/examples/rest-react-native/ios/Podfile:2
 #  -------------------------------------------
 #  require_relative '../node_modules/react-native/scripts/react_native_pods'
 >  require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 #
 #  -------------------------------------------
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

When rest-react-native is copied to another directory, yarn pods works fine. Can you help me figure out what it is about this directory structure / build setup that is causing issues?

  • I've added the commands yarn test:unit and yarn test:e2e, but I am not sure how I can best help set this up with CircleCI.

Other notes

  • Detox seems to be having trouble with Android Emulators on the current version, so I'm currently only running the E2E testing on the iOS simulator. That shouldn't be a major problem - usually the only differences between iOS and Android are UI, not functionality.

Example checklist

  • I've verified that all added tests pass by running npm test.
  • I've included only the necessary minimum setup to showcase the example.
  • I've added a README.md file to the root directory of my example.

@wwdrew
Copy link

wwdrew commented Jul 18, 2021

Hi @taylorkline, no problem at all :) I've been working on an example repo as well, but spare time isn't something I have in adundance at the moment. My repo is at https://github.com/wwdrew/examples/tree/react-native

The issue you're having is due to the examples project being a monorepo. It's installing the react-native module into the parent node_modules, so to compensate you need to update the paths in the project to point to the right place. You can see how I've done it in my repo.

However, although I've managed to the get the iOS app building, the Android one was still giving me trouble. Additionally, the iOS build was failing when trying to download the JS bundle from Metro. I've not had any time to figure out why or how to fix these problems though, so hopefully this has given you some help on how to overcome these last hurdles.

Also, although my example doesn't include e2e testing, I've included examples for using the REST API using fetch and react-query, as well as graphql using Apollo.

@taylorkline
Copy link
Author

Thanks so much @wwdrew, this is super useful. I plan to finish out this example when I have some free time, but I have been traveling and am behind on the day job.

Without this polyfill, calling `server.start()` will result in an Error: not implemented message followed by Error: Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.

This is due to the React Native URL polyfill that throws Not Implemented exceptions for functions that MSW calls.
This is the way of the future for React Native, so better to test against a Hermes build.
@ShivamJoker
Copy link

Hey folks any update on this?

@taylorkline
Copy link
Author

Hey folks any update on this?

Hi @ShivamJoker. I've picked it back up a couple times but now there are newer React Native versions.

Likely need to start this example over from the newest React Native version.

I might get to it eventually but if you're interested in taking it on please feel welcome to.

@ShivamJoker
Copy link

ShivamJoker commented Oct 10, 2022

Hey @taylorkline I will be happy to do it but I am unsure what other config we need to do to make it work?

I see there is some polyfill, do we need to have this in the app source code or will it work if we do it in the tests file as well?

require('react-native-url-polyfill/auto');

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants