Skip to main content
affpapa.org
RU EN
skill CX Codex

jest-react-testing — Claude Code skill: React tests with Jest

A skill for testing React components and hooks with Jest and React Testing Library: config, mocks, async patterns.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add manutej/luxor-claude-marketplace --skill jest-react-testing -a claude-code
Open on GitHub

What jest-react-testing does

The skill gives the agent a working frame for React tests: how to configure Jest, which queries to reach for, how to mock modules and API calls. It ships example jest.config.js files for JavaScript and TypeScript, a src/setupTests.js with mocks for matchMedia and IntersectionObserver, and a query priority list running from getByRole down to getByTestId.

A second part covers testing philosophy: assert on what the user does, not on component internals. Tests then survive refactors but still catch behaviour changes. The agent gets templates for mocks, async operations, timers and promises.

One caveat: the examples assume jsdom, babel-jest or ts-jest and @testing-library/jest-dom. On a different runner, or with Enzyme-style tests, you will rewrite the templates yourself.

What it helps with

  • set up Jest for a React project from scratch
  • write a test for a button click interaction
  • mock an API call and assert on the async render
  • test a custom React hook
  • pick the right query instead of getByTestId

Example prompts for the agent

  • set up Jest and React Testing Library for this project
  • write a test for the form component covering submit and error state
  • test the useCounter hook with renderHook

How to install jest-react-testing

1Skills CLI (Vercel)

npx skills add manutej/luxor-claude-marketplace --skill jest-react-testing -a claude-code

2Manually: put the files in place

~/.claude/skills/jest-react-testing/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/jest-react-testing/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about jest-react-testing

How do I install jest-react-testing in Claude?

Run npx skills add manutej/luxor-claude-marketplace --skill jest-react-testing -a claude-code. The skill file then lands at ~/.claude/skills/jest-react-testing/SKILL.md.

What does jest-react-testing do?

It helps the agent write and configure React component and hook tests with Jest and React Testing Library: configuration, mocks, async scenarios, integration tests.

What dependencies does the skill need?

The templates assume jsdom, babel-jest or ts-jest and @testing-library/jest-dom. With another runner the examples do not apply as written.

Similar skills

Everything for Testing and QA →
react-testing-library pproenca A skill with 43 React Testing Library rules. It steers the agent toward tests that check behaviour instead of component internals. CX Codex +1 402installs react-testing affaan-m A skill for writing React component, hook and page tests with React Testing Library, Vitest or Jest, MSW network mocks and axe accessibility assertions. CX Codex +1 4,800installs appbuilder-testing adobe This skill writes and runs Jest tests for Adobe App Builder actions and React components, with mocks for the Adobe SDKs. CX Codex +1 714installs jest Mindrally A skill that tells your agent how to write Jest tests: structure, mocks, assertions, async. Useful when AI writes the tests in your repo. CX Codex +1 864installs bun-jest-migration secondsky Walks a Jest test suite over to Bun's built-in runner: imports, mocks, timers and config. CX Codex +1 386installs react-native-testing callstack Skill for writing and reviewing React Native component tests with Testing Library. Covers queries, user interactions, async patterns, and supports v13 (React 18) and v14 (React 19+). CX Codex +1 5,300installs

From the same set31

postgresql-database-engineering Guides database design, index selection, and query optimization in PostgreSQL. Useful when tuning slow queries, setting up table partitioning, or configuring replication. CX Codex +1 1,800installs ui-design-patterns A reference on common interface patterns: navigation, forms, data display, feedback and accessibility. Useful when you design components or audit an existing UI. CX Codex +1 853installs ux-principles Gives your coding agent usability heuristics, user research methods and accessibility checks, so interface work follows known rules instead of guesswork. CX Codex +1 836installs frontend-architecture A skill for planning frontend structure: layers, patterns, state management and module boundaries. Useful once an app outgrows a flat folder of components. CX Codex +1 722installs alembic A skill that walks your agent through Alembic migrations on SQLAlchemy projects, from alembic init to production rollout and rollback. CX Codex +1 644installs wireframing A skill for interface design work: it walks from rough sketches and screen structure to a layout close to the final design. CX Codex +1 566installs expressjs-development A skill that feeds your coding agent Express.js patterns: routing, middleware, request and response handling, error handling. CX Codex +1 555installs mobile-design A skill for mobile interfaces: touch targets, gestures, thumb zones, safe areas and mobile-first layout for small screens. CX Codex +1 545installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor