skills.rest
guicheffer
guichefferCOMMUNITY
Explore all skills by this author →
Website𝕏@guichefferGitHub

test-patterns

Test React Native components with mocked GraphQL and TanStack Query.

3|Updated Dec 30, 2025
Search Tags:#testing#jest#graphql#mocking#react native#tanstack query
One-click install
npx skills add https://github.com/guicheffer/devorch-cli --skill test-patterns-guicheffer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: test-patterns
Source: https://github.com/guicheffer/devorch-cli/tree/main/templates/skills/testing/test-patterns
Command: npx skills add https://github.com/guicheffer/devorch-cli --skill test-patterns-guicheffer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides robust patterns for testing React Native components, ensuring reliability and speed by effectively mocking server data and asynchronous operations.

Core Features & Use Cases

  • GraphQL Mocking: Use MockedProvider to isolate GraphQL queries and mutations.
  • TanStack Query Mocking: Create isolated QueryClient instances for reliable hook testing.
  • Async Operation Testing: Employ waitFor and act for accurate simulation of asynchronous behavior.
  • Use Case: When testing a component that fetches user data via GraphQL and updates a local state based on a mutation, this skill helps you mock the network responses and verify the UI updates correctly without hitting a real API.

Quick Start

Use the test-patterns skill to write a unit test for a React Native component that fetches data using Apollo Client.

Frequently Asked Questions about test-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I mock GraphQL queries in React Native component tests?▼

Mock GraphQL queries in React Native tests by wrapping components in MockedProvider to isolate queries and mutations, ensuring deterministic test outcomes without hitting a real API. This provides reliable server data simulation for component isolation.

What's the best way to test TanStack Query hooks in React Native?▼

Test TanStack Query hooks by creating isolated QueryClient instances for each test. This approach ensures reliable hook testing by preventing state leakage between tests and maintaining deterministic asynchronous operation outcomes.

How do I handle asynchronous operations when testing React Native components?▼

Handle asynchronous operations in React Native tests by employing waitFor and act utilities to accurately simulate async behavior. This ensures your test correctly waits for data fetching and UI updates before assertions.

Why are my React Native GraphQL mutation tests failing with async data flows?▼

React Native GraphQL mutation tests fail due to unmocked network responses and unhandled async data flows. Address these common pitfalls by using MockedProvider for mutations and waitFor to verify UI updates correctly.

Can I test React Native components that fetch user data via Apollo Client without a real API?▼

Yes, you can test components fetching user data via Apollo Client without a real API by using MockedProvider. This isolates network responses, allowing you to verify UI updates correctly after local state mutations.

Related Skills

Explore More Software Engineering Skills→
guichefferguicheffer
3

mocking-strategies

Mock external dependencies in React Native unit tests with Jest.

Community
Intermediate
vndeevndee
3

py-integration-test

Run integration tests against real PostgreSQL and Redis services with testcontainers.

Community
Advanced
TMHSDigitalTMHSDigital
2

mobile-api-integration

Integrate React Native and Expo apps with REST and GraphQL APIs.

Community
Advanced
gil00pitagil00pita

storybook

Develop, document, and test UI components in isolated Storybook workshops.

Community
Intermediate