WhoBuilt

Visual Regression Test In React Native

Oct 21, 2020· 28 min· 1.1K views·Watch on YouTube
#Software Testing#CI/CD

Speaker

Jesse Katsumatafront-end engineer at CureApp

Jesse Katsumata, a front-end engineer at CureApp, discusses visual regression testing for React Native at React Native EU 2020, hosted by Callstack.

UI tests protect visible behavior

Katsumata describes UI testing as checking the parts of an app users can see, including whether a login page has the expected fields, button states, and loading state. He distinguishes snapshot tests, which track component structure, and interaction tests, which check user flows, from visual regression tests, which compare how screens look.

Compare screenshots to catch layout changes

Visual regression testing takes reference screenshots and compares them with new screenshots after code changes. Katsumata’s example changes a shared button’s width from 150 to 240: the signup page improves, but the login page’s side-by-side buttons no longer fit. A screenshot report can reveal the unintended change across both pages.

Visual checks support refactors and dark mode

Unlike snapshots, screenshot comparisons focus on appearance, so they can avoid updates caused solely by changes to component structure or a third-party library. Katsumata also recommends testing both light and dark appearances, since dark mode adds screens to check and can expose unreadable text.

RegSuit workflow and Storybook demo

Katsumata uses the open-source tool RegSuit to compare screenshots stored in cloud storage, such as AWS S3 or Google Cloud Storage, and generate reports for pull requests. He uses Storybook with React Native for Web and Storycap to capture components, while noting web screenshots may differ from native app rendering. In the demo, changing a button’s label and border radius produces a report that flags the button and a login page that uses it.

Takeaways

  • Screenshot tests can catch unintended visual changes in every screen that uses a shared component.
  • Use snapshots for structure and interaction tests for user flows; screenshot comparisons answer a different question about appearance.
  • Test light and dark appearances to catch styling issues such as unreadable text.
  • Connect screenshot capture and comparison to pull requests so reviewers can inspect visual changes before merging.
  • If using React Native for Web to capture screenshots, account for differences from native rendering.

Mentioned in this talk

CureAppReact Native Testing LibraryAppearance APIRegSuitAWS S3Google Cloud StorageStorybookStorycapReact NativeAWS CDKTypeScriptReactNode.jsJestReact Native Webvisual regression testingUI testingSnapshot testinginteraction testing

Search inside this talk

What was claimed 15

Related talks