# jest-react-testing

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

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 installs · ★ 62
- Author: manutej
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/jest-react-testing/SKILL.md
- Updated: 2026-06-13
- HTML: https://affpapa.org/en/nevibecode/skills/jest-react-testing

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill jest-react-testing -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/jest-react-testing/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/jest-react-testing/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill jest-react-testing -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/jest-react-testing/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill jest-react-testing -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/jest-react-testing/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace jest-react-testing
```

2. **Manually: put the files in place**
- File: `.github/skills/jest-react-testing/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill jest-react-testing -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/jest-react-testing
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/jest-react-testing/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill jest-react-testing -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/jest-react-testing/SKILL.md

## When to use it
- 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
- 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

## Similar
- [react-testing-library](https://affpapa.org/en/nevibecode/skills/pproenca-react-testing-library.md) — skill · 402 installs
- [react-testing](https://affpapa.org/en/nevibecode/skills/react-testing.md) — skill · 4800 installs
- [appbuilder-testing](https://affpapa.org/en/nevibecode/skills/appbuilder-testing.md) — skill · 714 installs
- [jest](https://affpapa.org/en/nevibecode/skills/jest.md) — skill · 864 installs
- [bun-jest-migration](https://affpapa.org/en/nevibecode/skills/bun-jest-migration.md) — skill · 386 installs
- [react-native-testing](https://affpapa.org/en/nevibecode/skills/react-native-testing.md) — skill · 5300 installs

From the same set: [manutej/luxor-claude-marketplace](https://affpapa.org/en/nevibecode/by/manutej/luxor-claude-marketplace.md) — 31 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md