Recently we wrote about the frontend engineering standards in TenX. This standard gives us a chance to work with incredible libraries out there, such as React Native, Expo, and TypeScript. We also shared a little bit about how we do testing for our relaunched TenX app. In this article, we’ll be digging deeper into testing, especially UI testing, and how we developed a tool that make this process easier.

Background: Snapshot testing using Jest

We use Jest as the testing framework for our TenX app. This library meets our needs as it provides filtering, watch mode, and other cool ways to run our tests automatically.

Another cool thing this library supports is snapshot testing — a very useful tool for making sure your UI does not change unexpectedly. It compares the structure of the current UI with the saved structure that was previously generated. With one easy command, you can start seeing how your layout is rendered and compare the differences.

Example of React Native screen component
Example of generated UI snapshot

Limitations in relying solely on snapshot testing

This is a great UI testing method, which we even implemented for our E2E API test! However, we found some limitations in relying solely on snapshot testing:

  1. If a snapshot test breaks, developers tend to update the snapshot directly in order to fix the test without knowing the actual impact to the UI.
  2. When fellow engineers are reviewing the code that includes snapshot changes, they tend to “just approve” it because it is hard to tell what the difference really is.

Our requirements beyond snapshot testing

We also wanted a tool with these specific features in addition to snapshot testing:

  1. Quick, automated reference for each screen, which would be useful if we have changes in a component that affect a lot of screens.
  2. Regression test to make sure that future changes won’t break the existing layout.

Beyond this feature set, it was important that the tool improved collaboration between the engineering, product, and design teams to facilitate feature development and QA.

It’s hard to know the impact of these changes

Having these requirements in mind, we decided to create a tool that could help us to solve these problems. We were inspired by the concept of Storybook, but found that it didn’t really fit our use case.

We wanted to expand on these approaches and take snapshot testing to another level, where our engineers and product team can collaborate on making a better UI. This is why we built Stargazer.

Introducing: React Native Stargazer

Stargazer is a UI regression testing library for Expo/React Native apps. It implements the concept of snapshot testing by taking screenshots of every screen in our app and allowing us to compare the rendered UI between iOS and Android. We are able to do this with the takeSnapshotAsync function from Expo (shout out to Expo team!).

Stargazer makes debugging and designing QA a lot easier without having to go to every screen manually, especially for deeply nested screens.

How Stargazer works can be broken down into 3 simple steps:

  1. Take screenshots of every screen component in your app.
  2. Save all the screenshots to a JSON file.
  3. Boot up a web page to browse the generated screenshots.

And… that’s it!

Stargazer provides the tooling to make this process easy, and a prebuilt UI to visualize the output. You’ll just need to provide the screen components that you want to record in a standard route configuration and then run a few commands that Stargazer provides to use this tool.

Stargazer in action

Stargazer UI browser

Using Stargazer at TenX

Recently we refactored our wallet’s codebase and consolidated our text components to a single component. This change affected all our app screens because text component is one of our core UI components.

We used Stargazer to quickly rebuild all of our app screens on iOS and Android for review by our product and design teams. This helped us to validate these widespread UI changes and find some edge cases to fix before we released these changes.

Open Sourcing Stargazer

We’re proud to announce that we are open sourcing this Stargazer project! We believe that this tool is the solution to similar problems faced by many fellow developers and engineers.

We’d love to hear from the community and grow this tool together. Run npm install --save react-native-stargazer, try it and share your experience!

React Native Stargazer (https://github.com/tenx-tech/stargazer)

If you have any further questions about TenX please…