1. Habit
  2. Skills
  3. Frontend Testing Best Practices skill
sergiodxa · 2K installs

Frontend Testing Best Practices skill
Runs by itself, test files changed.

Tests check behavior, not implementation.

Install the Frontend Testing Best Practices skill and make it a habit: follow https://gethabit.dev/skills/sergiodxa/frontend-testing-best-practices.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

2K installs92 starsMIT licenceSource on GitHub ↗

Frontend Testing Best Practices

by sergiodxa · 2K installs

The skill

The frontend testing best practices skill helps frontend developers write and review tests that favor E2E over unit tests, keep mocking minimal and test behavior instead of implementation.

Only when you ask.

The habit

Tests check behavior, not implementation.

↻ Runs by itselftest files changed

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

test files changed. Runs in GitHub Actions or Claude Code routine.

  • ↻ test files changed
  • pull_request touches test or spec files

02

It checks its work

tests pass, rules hold. If a check fails, it tells you.

  • ✓tests pass
  • ✓no unit test renders a React component
  • ✓no test file has 3 or more vi.mock calls
  • ✓E2E tests live in e2e/tests/

03

It remembers

test rule findings. The next run reads it first: rules flagged in earlier reviews.

loops/frontend-test-review-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleStops after one pull request per run.

  1. 01

    List test changes

    Collect new and changed unit and E2E tests in the pull request.

  2. 02

    Check strategy

    Flag component unit tests and heavy mocking that should be E2E tests.

  3. 03

    Check structure

    Confirm E2E tests sit in e2e/tests/ and unit tests sit beside pure functions.

  4. 04

    Check selectors

    Prefer role, then label, then text, then test ID.

  5. 05

    Run and report

    Run the tests and list findings by rule.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Frontend Testing Best Practices skill helps.

Use it when

  • ✓ You decide what kind of test to write
  • ✓ You review test code
  • ✓ You refactor a brittle test suite

Skip it when

  • – You test a backend library
  • – Your team requires component unit tests

Questions

Frontend Testing Best Practices skill, answered.

When is a unit test fine?

For pure functions, placed next to the source file.

What if I need many mocks?

The skill says three or more mocks means you should write an E2E test.

How do I install the Frontend Testing Best Practices skill?

Copy the prompt at the top into your agent. It installs the skill from sergiodxa/agent-skills and sets up the habit. Or run npx skills add sergiodxa/agent-skills --skill frontend-testing-best-practices.

Is the Frontend Testing Best Practices skill free?

Yes. It is published under MIT. Habit is free too.

Frontend Testing Best Practices. Now as a habit.

Install the Frontend Testing Best Practices skill and make it a habit: follow https://gethabit.dev/skills/sergiodxa/frontend-testing-best-practices.md

  • Free
  • No account
  • Undo in one line

All sergiodxa skills →More code skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by sergiodxa, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.