Agent skill

Jest Testing Patterns

by ChrisWiles in ChrisWiles/claude-code-showcase

Jest patterns for React Native style tests: TDD discipline, mock factory functions, module and GraphQL hook mocking, custom render helpers and anti-patterns to avoid.

No licenceAuto-check passedTesting & QA

Install Jest Testing Patterns

skills CLI
$ npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ChrisWiles/claude-code-showcase testing-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ChrisWiles/claude-code-showcase.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/testing-patterns .claude/skills/testing-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
testing-patterns
GitHub stars
6.1k
Used in
7 other repos
Token cost
~1.5k tokens
SKILL.md length
183 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
None found

At a glance

Jest patterns for React Native style tests: TDD discipline, mock factory functions, module and GraphQL hook mocking, custom render helpers and anti-patterns to avoid.

  • Works in 6 steps: Always use factory functions for props… → Test behavior, not implementation → Use descriptive test names → …
  • Writing unit tests for a React Native component
  • SKILL.md covers Testing Philosophy, Test Utilities, Factory Pattern and Mocking Patterns, plus 7 more sections
  • Calls npm

What it does

Test-driven development is the baseline: write the failing test first, implement the minimum, refactor once green, and never write production code without a failing test. A behavior-driven stance goes with it, testing public behavior and business requirements rather than implementation details, with descriptive test names.

The practical sections cover a custom render function that wraps components in the required providers, factory functions with sensible defaults and overridable properties for component props and data objects, and mocking of whole modules and GraphQL query hooks with jest.mock. Examples also show a standard describe and beforeEach structure with jest.clearAllMocks, query patterns, and form interactions using fireEvent.

Anti-patterns are called out explicitly, such as asserting on a mock instead of real behavior and repeating hand-written test data instead of using a factory.

When your agent uses it

  • Writing unit tests for a React Native component
  • Creating test data factories with overridable defaults
  • Mocking modules or GraphQL hooks in Jest
  • Following a red-green-refactor cycle on a new feature

Example prompts

  • “Write tests for the ProfileCard component using a props factory and a themed render helper.”
  • “Mock the useGetItemsQuery hook in this test and cover the loading and error states.”
  • “Refactor these tests that repeat the same user object into a getMockUser factory.”

Requirements

  • Jest and the React Native Testing Library

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Always use factory functions for props and data
  2. Test behavior, not implementation
  3. Use descriptive test names
  4. Organize with describe blocks
  5. Clear mocks between tests
  6. Keep tests focused - one behavior per test

What it can do on your machine

Read from SKILL.md and the folder at commit a95518f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Jest Testing Patterns loads about 1.5k tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 183 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~48
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 183 words (~1,463 tokens).

name
testing-patterns

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .claude/skills/testing-patterns of ChrisWiles/claude-code-showcase.

Open the folder on GitHubat commit a95518f

Used in 7 other repositories

We found 23 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 7 other GitHub owners. This page covers the copy in ChrisWiles/claude-code-showcase, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Jest Testing Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Jest Testing Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Jest Testing Patterns this skillChrisWiles/claude-code-showcase6.1k7 repos~1.5kAutomated safety check: PassNone
Test Guidelinesgetsentry/sentry-react-native1.8k—~1.3kAutomated safety check: PassMIT
Testingredis/RedisInsight8.9k—~3.3kAutomated safety check: PassCustom licence
React Native Testingcallstackincubator/agent-skills1.7k—~1.8kAutomated safety check: PassMIT
React Native TestingHoangNguyen0403/agent-skills-standard570—~647Automated safety check: PassMIT
RTK Filter TDD in Rustrtk-ai/rtk83k—~1.9kAutomated safety check: NotesApache-2.0

Similar skills

  • Test Guidelines

    getsentry/sentry-react-native

    Official

    Enforce Sentry React Native SDK test conventions for naming, structure, mocking, and fixtures with Jest.

    1.8k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed
  • Testing

    redis/RedisInsight

    Official

    Unit/integration testing standards for RedisInsight using Jest and Testing Library: test structure, the renderComponent helper, faker for test data, mocking patterns, and waitFor instead of fixed…

    8.9k GitHub stars~3.3k tokensUpdated 3 days ago
    Testing & QAAuto-check passed
  • React Native Testing

    callstackincubator/agent-skills

    Official

    Write tests using React Native Testing Library (RNTL) v13 and v14 (@testing-library/react-native).

    1.7k GitHub stars~1.8k tokensUpdated yesterday
    MobileAuto-check passed
  • React Native Testing

    HoangNguyen0403/agent-skills-standard

    Test React Native components with Jest and React Native Testing Library.

    570 GitHub stars~647 tokensUpdated yesterday
    MobileAuto-check passed
  • Enforces red-green-refactor for new RTK output filters in Rust, using real captured fixtures, snapshot tests with insta and token-savings assertions.

    83k GitHub stars~1.9k tokensUpdated today
    Testing & QAAuto-check: notes
  • Write Tests

    grafana/synthetic-monitoring-app

    Official

    Write Jest integration and unit tests for the Grafana Synthetic Monitoring app using React Testing Library, MSW, and src/test helpers.

    171 GitHub stars~1.2k tokensUpdated yesterday
    Testing & QAAuto-check passed

More from ChrisWiles/claude-code-showcase

  • Core Component Library Patterns

    ChrisWiles/claude-code-showcase

    Reference for building UI with a token-based core component library: spacing, color and typography tokens, Box, stacks, Text, Button, Input and Card, plus layout patterns.

    6.1k GitHub starsUsed in 7 repos~1.2k tokens
    Auto-check passed
  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 7 repos~1.6k tokens
    Auto-check passed
  • Formik Form Patterns

    ChrisWiles/claude-code-showcase

    Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.

    6.1k GitHub starsUsed in 3 repos~2.1k tokens
    Auto-check passed
  • GraphQL Operations with Codegen

    ChrisWiles/claude-code-showcase

    Sets the rules for writing GraphQL queries and mutations in .gql files, running codegen, and using generated Apollo hooks with proper error and loading handling.

    6.1k GitHub starsUsed in 3 repos~1.5k tokens
    Auto-check passed
  • Systematic Debugging

    ChrisWiles/claude-code-showcase

    Applies a four-phase debugging routine that finds the root cause of a bug or failing test before any fix is written.

    6.1k GitHub starsUsed in 3 repos~1.2k tokens
    Auto-check passed

Categories

Questions about Jest Testing Patterns

What does Jest Testing Patterns do?

Jest patterns for React Native style tests: TDD discipline, mock factory functions, module and GraphQL hook mocking, custom render helpers and anti-patterns to avoid. Test-driven development is the baseline: write the failing test first, implement the minimum, refactor once green, and never write production code without a failing test. A behavior-driven stance goes with it, testing public behavior and business requirements rather than implementation details, with descriptive test names.

When should I use Jest Testing Patterns?

Jest Testing Patterns fits situations like: writing unit tests for a React Native component; creating test data factories with overridable defaults; mocking modules or GraphQL hooks in Jest; following a red-green-refactor cycle on a new feature.

How do I install Jest Testing Patterns in Claude Code?

Run `npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -a claude-code`. Or copy the skill folder (.claude/skills/testing-patterns in ChrisWiles/claude-code-showcase) into .claude/skills/testing-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Jest Testing Patterns in Codex?

Run `npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -a codex`. Or copy the skill folder (.claude/skills/testing-patterns in ChrisWiles/claude-code-showcase) into .agents/skills/testing-patterns in your project. Codex loads it when a task matches its description.

Can I use Jest Testing Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ChrisWiles/claude-code-showcase --skill testing-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/testing-patterns, .gemini/skills/testing-patterns, .github/skills/testing-patterns and .opencode/skills/testing-patterns in your project.

What does Jest Testing Patterns need to run?

Going by SKILL.md and its folder, Jest Testing Patterns needs the command-line tools its instructions call (npm). Our summary lists: Jest and the React Native Testing Library.

Does Jest Testing Patterns access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Jest Testing Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Jest Testing Patterns use?

No licence was found for Jest Testing Patterns or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Jest Testing Patterns use?

About 1.5k tokens (SKILL.md is roughly 5.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Jest Testing Patterns?

Skills that share tags, products or a category with Jest Testing Patterns: Test Guidelines (getsentry/sentry-react-native, 1.8k stars), Testing (redis/RedisInsight, 8.9k stars), React Native Testing (callstackincubator/agent-skills, 1.7k stars) and React Native Testing (HoangNguyen0403/agent-skills-standard, 570 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Jest Testing Patterns?

ChrisWiles (a GitHub user) maintains it in ChrisWiles/claude-code-showcase, which has 6,072 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on January 6, 2026.

Source: ChrisWiles/claude-code-showcase on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.