Test components through accessible semantics in Claude Code
Find controls by role and accessible name, then assert public behavior with test doubles at system boundaries only.
中文Install in Claude Code
The ngx-formbar test workspace in Claude Code with an interactive component and its existing test framework.
- Review `.claude/skills/testing-principles/SKILL.md` and its requirements at the pinned GitHub commit.
- Create `.claude/skills/testing-principles/` in your project and save the reviewed file as `.claude/skills/testing-principles/SKILL.md`.
- Start Claude Code from that project's root, then select `/testing-principles` in the slash menu.
Example task
A fictional form has a native Apply filter button. The fixture is `{role:'button',name:'Apply filter',expected:'Showing Hall'}`.What to check
Locate `getByRole('button', {name:'Apply filter'})`. Click it and assert `Showing Hall`. The assertion remains valid if styling classes change.
Original SKILL.md on GitHub · Updated
Frequently asked question
How can I find a named button and verify the form outcome?
Prefer its button role and accessible name, then assert what the user sees. Use a test double only for any outside service that must be isolated.