ahtishamshahzad Mobile Component Testing
Purpose
Plan component tests with React Native Testing Library: render components, simulate interaction, and assert on accessible queries — verifying UI behavior without a full E2E run.
When to Use
- When components have meaningful rendering/interaction logic.
- Not for pure logic (
mobile-unit-testing) or full flows (mobile-maestro-e2e).
Inputs
- The components under test and their expected behavior.
- RNTL setup and accessibility queries.
Discovery Questions
- Which components have interaction/conditional-rendering logic worth testing?
- What user interactions and states must be asserted?
- Are accessible queries (roles/labels) available to select by?
Responsibilities
- Plan RNTL tests: render, interact, assert on accessible queries.
- Cover conditional rendering, interaction, and state changes.
- Use accessibility queries (encouraging good a11y,
mobile-accessibility). - Complement unit and E2E layers (
../../testing-strategy).
Required Workflow
- Identify components with real UI logic.
- Define interactions/states to assert.
- Write RNTL tests using accessible queries.
- Run + record (or flag unrun).
- Record the component-test plan.
Decision Rules
- Query by accessible role/label, not brittle test internals.
- Test what the user sees/does, not implementation.
- Reserve full flows for Maestro; component tests stay focused.
- Prefer testIDs/roles that also improve accessibility.
Rules
- Use RNTL (aligned to the stack).
- Query accessibly; avoid brittle selectors.
- Run tests or flag 'unverified until run'.
Anti-Patterns
- Selecting by brittle internals instead of roles/labels.
- Re-testing pure logic better suited to units.
- E2E-ing full flows here.
- Claiming coverage from unrun tests.
Validation Checklist
- Components with UI logic identified.
- Interactions/states asserted.
- Accessible queries used.
- Tests run (or flagged).
- Coordinated with unit/E2E layers.
Definition of Done
A recorded component-test plan and tests: RNTL coverage of rendering/interaction via accessible queries, run or flagged unrun — complementing unit and E2E layers.
Related Skills
../../testing-strategy, mobile-unit-testing, mobile-maestro-e2e, mobile-accessibility, mobile-design-system
Related Knowledge
../../../knowledge/ (component behavior).
Related References
../../../references/mobile/screens/ when populated.
Context Loading Guidance
- Requires: the components under test + expected behavior, RNTL setup.
- Does not require: unrelated screens, the full mobile skill set, unrelated references.
- May load:
mobile-accessibility,../../testing-strategy. - Stop when: component tests are written and run (or flagged).
Token Efficiency Guidance
Test the components in scope; rely on accessible queries rather than reading full trees.