When should I use this skill in my workflow?

It should be used after unit testing (Gate 3) is complete but before moving to full end-to-end (E2E) testing.

Which testing libraries does this skill work with?

It is designed to work with Jest and React Native Testing Library (RNTL) for rendering and snapshotting components.

Does it support both iOS and Android platforms?

Yes, the skill specifically requires and verifies snapshots for both platforms if the component uses platform-specific logic or styling.

Can this skill help with design system consistency?

Yes, it includes a mandatory check to ensure that new components aren't duplicating existing elements within the core UI library.

What is the primary purpose of this React Native testing skill?

The skill automates 'Gate 4' of the development cycle, ensuring that all UI components have comprehensive snapshot tests covering various states and platforms to prevent visual regressions.

React Native Visual & Snapshot Testing

Name: React Native Visual & Snapshot Testing
Author: luanrodrigues

byluanrodrigues

•

Mobile Development

Automates the generation and verification of React Native Jest snapshot tests to ensure UI consistency across iOS and Android platforms.

This skill streamlines the fourth gate of the React Native development cycle by orchestrating comprehensive visual testing. It ensures that every UI component is covered by Jest snapshot tests using React Native Testing Library (RNTL), specifically targeting cross-platform differences between iOS and Android. By verifying all component states—including loading, error, and empty states—and checking for design system duplication, this skill helps developers catch visual regressions early before moving to end-to-end testing.

Características Principales

01Edge case validation for RTL layouts and dynamic content

02Platform-specific visual verification for iOS and Android

03Automated Jest snapshot generation for React Native components

042 GitHub stars

05Comprehensive state coverage including Loading, Error, and Empty states

06Automated detection of component duplication in UI libraries

Casos de Uso

01Automating the visual QA handoff between unit testing and E2E testing

02Ensuring UI consistency across mobile platforms during feature development

03Catching visual regressions in shared components after refactoring

Características Principales

01Edge case validation for RTL layouts and dynamic content

02Platform-specific visual verification for iOS and Android

03Automated Jest snapshot generation for React Native components

042 GitHub stars

05Comprehensive state coverage including Loading, Error, and Empty states

06Automated detection of component duplication in UI libraries

Casos de Uso

01Automating the visual QA handoff between unit testing and E2E testing

02Ensuring UI consistency across mobile platforms during feature development

03Catching visual regressions in shared components after refactoring