Stargazer: Taking Snapshot Testing to Another Level
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.
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:
- 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.
- 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:
- Quick, automated reference for each screen, which would be useful if we have changes in a component that affect a lot of screens.
- 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.
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:
- Take screenshots of every screen component in your app.
- Save all the screenshots to a JSON file.
- 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.
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!
If you have any further questions about TenX please…
- Join our community chat on Rocket.Chat
- Join the discussion on our Community Forum
- Subscribe to the TenX subreddit
- Follow TenX on Twitter
- Subscribe to us on Vimeo
- Follow TenX on Facebook
- Follow our blog on Medium
- Subscribe to our monthly newsletter
