# Grommet Component Testing

> Write tests and Storybook stories for Grommet components. Use when writing unit tests with @testing-library/react and jest-axe, setting up userEvent interactions, querying the DOM, or creating CSF-3 Storybook stories. Covers required axe accessibility checks as the first test, userEvent vs fireEvent guidance, query priority (getByRole first), Grommet wrapper requirement, snapshot usage, coverage targets, story file format, FormField integration stories, and CustomThemed stories.

- Skill: `grommet/grommet-component-testing` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add grommet/grommet-component-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/grommet/grommet-component-testing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: grommet (https://skillmd.com/u/grommet)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/grommet/grommet-component-testing

---


# Grommet Component Testing Skill

## When to Use
- Writing a new `__tests__/ComponentName-test.tsx` file
- Adding test cases to an existing test file
- Creating Storybook story files in `stories/`
- Reviewing tests against Grommet's coverage and accessibility requirements

## Workflow

### Tests
1. **axe first** — the very first test in every file must be an axe accessibility check wrapped in `<Grommet>`.
2. **Queries** — query via `screen.getByRole` → `getByLabelText` → `getByText`. Use `getByRole` whenever a semantic role is available.
3. **Interactions** — use `userEvent.setup()` for all user interactions (click, type, keyboard). Use `fireEvent` only for low-level synthetic events that `userEvent` cannot produce.
4. **Snapshots** — use `asFragment()` for snapshot assertions, not `container.innerHTML`.
5. **Wrappers** — wrap renders in `<Grommet>` by default. Omit only when explicitly testing unwrapped/unstyled behavior.
6. **Coverage** — target ≥85% for state logic, prop handling, and keyboard navigation.

### Stories
1. One story per file, CSF-3 format.
2. Title: `'ComponentCategory/ComponentName/StoryName'`.
3. Always include a basic controlled and/or uncontrolled usage story when the component has a value contract.
4. Include a `Form` + `FormField` integration story when the component participates in forms.
5. Add a `CustomThemed` story **only** when the component introduces new theme tokens.

## Key Rules
- File extension: `.tsx` for both test files and new story files
- Test files live in `__tests__/`, story files live in `stories/`
- `userEvent.setup()` not `fireEvent` for simulating user interactions
- `screen.getByRole` as the first query choice — it reflects actual accessibility semantics
- Every test file starts with an axe check
- Wrap all renders in `<Grommet>` unless testing unwrapped behavior explicitly

## See Also
- [REFERENCE.md](./REFERENCE.md) — full code examples for test structure, axe setup, userEvent patterns, story CSF-3 format, and FormField integration