agentleFS
Sign inStart free
VJDiPaolaVJDiPaola/skill-forge/react-query-test-harness-fixer/SKILL.md

react-query-test-harness-fixer

Skill0 starsChanged 30 days agoMITView on GitHub

Fix React/Vitest test failures for TanStack React Query components and jsdom side effects. Use when React Query component tests fail under Vitest or jsdom with hangs, act warnings, or side-effect leaks.

We split this skill into the rules it gives an agent

8 rules. About 0 are common, 4 are distinctive, and 4 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈4

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 4

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use this workflow when test setup has fallen behind the app's React Query and browser dependencies.

    line 8
  2. Very specific:

    Create a new QueryClient per helper or per test and set retry: false for deterministic failures.

    line 21
  3. Very specific:

    Wait for async UI with findBy...

    line 24
  4. Very specific:

    Put durable browser shims in shared test setup for matchMedia and HTMLCanvasElement.getContext.

    line 30
  5. Very specific:

    Do not share one QueryClient across unrelated tests.

    line 36
  6. Distinctive:

    Do not assert on post-query UI before the fetch promise has resolved.

    line 37
  7. Distinctive:

    Do not leave broad fetch mocks or global state behind between tests.

    line 38
  8. Distinctive:

    Run the targeted test file first.

    line 42

≈ “Common” is an estimate: at least 1 in 5 of the 308,232 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

React Query Test Harness Fixer

Use this workflow when test setup has fallen behind the app's React Query and browser dependencies.

Read First

  • The failing test file
  • The page or component under test
  • Shared test setup such as client/tests/setup.ts
  • Any route or data modules the component depends on

Workflow

  1. Identify every useQuery, useMutation, and route dependency used by the rendered component.
  2. Wrap the render path in a fresh QueryClientProvider.
  3. Create a new QueryClient per helper or per test and set retry: false for deterministic failures.
  4. Stub network calls at the boundary the component actually uses. Return stable list and detail responses.
  5. Recreate routing context with the same router the app uses, such as memoryLocation for wouter.
  6. Wait for async UI with findBy... or waitFor after the query resolves.
  7. Neutralize browser-only side effects.

Browser API Rules

  • Mock navigator.clipboard in the test when copy behavior is asserted.
  • Put durable browser shims in shared test setup for matchMedia and HTMLCanvasElement.getContext.
  • Mock side-effect libraries such as canvas-confetti directly when the animation is not part of the assertion.
  • Clear localStorage and reset globals after each test.

Anti-Patterns

  • Do not share one QueryClient across unrelated tests.
  • Do not assert on post-query UI before the fetch promise has resolved.
  • Do not leave broad fetch mocks or global state behind between tests.

Validation

  1. Run the targeted test file first.
  2. Run npm.cmd run test.
  3. Run npm.cmd run check.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free