Revamping RNTester

[empyrical]

Introduction

RNTester is in quite a bit of need of a revamp. This can serve as a bit of a discussion before a proposal on what to do is made. (This is based off of a discussion in RNCore)

The Core of It

• Make it obvious how to structure new examples in there and making it really easy to write automated tests for it (It is never quite clear if all the examples work)

Discussion points

• Can it be made easier for out of tree platforms to use? (see RNWindows' RNTester update process). Perhaps whatever is done to make this easier could also make it easier for out-of-tree components like WebView to make use of RNTester.
• Should a revamped RNTester make use of React Navigation?
• How could it be made clearer that all examples work at-a-glance? One possibility:

  For example, if every example had some sort of indicator next to it, for example a green square showing that it "worked", or a counter that increments on each call, or specific things like that

[elicwhite]

Thanks for starting the conversation.

Something I think is important in a revamp for RNTester is building it in such a way that is meant to support automated tests. The proposal of some sort of "indicator" for each example is that it makes it really easy for an automated test to have a consistent way to validate examples.

For example, it could enable a test helper like the following:

expect(() => {
 // ... do stuff
}).toEnableIndicator();

expect(() => {
 // ... do stuff
}).toHaveIndicatorCounter(4);

By having a consistent way to write and test examples then it will be much easier to ensure people have an easy time adding tests to PRs without getting stuck.

---

Another example of how RNTester currently isn't set up for automated tests is that we need to be able to easily reset state between runs. Right now RNTester persists navigation history which requires the few detox tests we have to click "back" to go back to the main list between each run.

[brentvatne]

we do something similar to that in Expo @TheSavior: https://github.com/expo/expo/tree/master/apps/test-suite

for example: https://github.com/expo/expo/blob/master/apps/test-suite/tests/Permissions.js

cc @ide

[grabbou]

Great we are having this discussion!

Right now RNTester persists navigation history

This has been super annoying for me sometimes when RNTester would open and default to a "blank page" (yeah, there's no "not found" example). This happens when pages are moved around in between releases, where my state is usually persisted.

Something I think is important in a revamp for RNTester is building it in such a way that is meant to support automated tests. The proposal of some sort of "indicator" for each example is that it makes it really easy for an automated test to have a consistent way to validate examples.

Right now, each example is registered as a component in AppRegistry, meaning we can either render the whole app or request rendering a single page. This used to be useful for running screenshot tests on iOS (run the app with specified component, screenshot it and compare two images for inconsistencies).

I am not sure if Detox can take advantage of that, but if it could, that would certainly be useful.

[cpojer]

Is there anybody interested in doing this work or at least starting a master task that lists all the work we could do as part of this?

[pvinis]

I would be happy to help with RNTester. I've been wanting to actually set up a release that could in theory go to the appstore, that is the RNTester app, so devs can directly play around with it and see the capabilities, as well as serve as the example with the latest RN version, latest styles (hooks) etc.

[lucasbento]

✋ I would be in for helping as well.

[cpojer]

Closing this issue as @pvinis created an issue on React Native to revamp RNTester.