front-end-testing
DOM Testing Library patterns for behavior-driven UI testing. Framework-agnostic patterns for testing user interfaces. Use when testing any front-end application.
Security Assessment
About front-end-testing
The 'front-end-testing' skill provides framework-agnostic DOM Testing Library patterns aimed at behavior-driven UI testing. It addresses the common challenge of ensuring tests remain reliable despite refactoring and changes in implementation. The primary goal is to test user-visible behavior rather than internal implementation details, reducing false positives and negatives in tests. This skill is particularly useful for testing the front-end of applications across multiple frameworks like React, Vue, and Svelte. By focusing on the interactions users have with the UI, it creates more resilient and meaningful tests that better reflect real-world usage scenarios.
FAQ
How does the front-end-testing skill improve test reliability?
This skill ensures that tests are behavior-driven, focusing on user-visible actions instead of implementation details. This approach prevents tests from breaking on refactor (false negatives) and ensures they detect real issues such as broken functionality (false positives).
Which frameworks does this skill support?
The 'front-end-testing' skill is framework-agnostic and works with various front-end frameworks, including React, Vue, and Svelte. For React-specific patterns, you can load the `react-testing` skill.
Can I use this skill for Test-Driven Development (TDD)?
For TDD workflows, such as the RED-GREEN-REFACTOR cycle, it is recommended to load the `tdd` skill in addition to the 'front-end-testing' skill for enhanced support.
What is the recommended query selection order when using the Testing Library?
The recommended query selection order is: 1. `getByRole`, 2. `getByLabelText`, 3. `getByPlaceholderText`, 4. `getByText`, 5. `getByDisplayValue`, 6. `getByAltText`, 7. `getByTitle`, and 8. `getByTestId` as the last resort.
Are there any limitations to using the 'front-end-testing' skill?
The primary limitation is that `getByTestId` should only be used as a last resort, as it does not reflect user-facing behavior and is not accessible for screen readers.
Install front-end-testing
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
citypaul/.dotfiles