[{"data":1,"prerenderedAt":54},["ShallowReactive",2],{"\u002Fapi\u002Fpage\u002Fskills\u002Fsumi-react\u002Freact-testing":3,"PageBody_UiefLU5FjCDBX5keSHf6NIYe3ORxjxPNqlVraym4k":46},{"title":4,"description":5,"plugin":6,"kind":7,"references":8,"source":9,"heading":10,"toc":11,"locale":45},"react-testing","Testing React\u002FNext.js apps - Vitest + React Testing Library for components and hooks, MSW for network mocking, Playwright for E2E and async Server Components, axe for automated accessibility checks, testing Server Actions and zod schemas as plain functions. Test behavior, not implementation. Use when writing or reviewing *.test.ts(x), *.spec.ts, tests\u002F**, e2e\u002F**, vitest.config.*, playwright.config.*, MSW handlers, or when adding a feature\u002Fbugfix that needs coverage or deciding what to test.","sumi-react","skill",1,"plugins\u002Fsumi-react\u002Fskills\u002Freact-testing\u002FSKILL.md","React \u002F Next.js testing",[12,15,18,21,24,27,30,33,36,39,42],{"id":13,"text":14},"principles","Principles",{"id":16,"text":17},"what-to-test-where","What to test where",{"id":19,"text":20},"queries-accessible-first","Queries: accessible first",{"id":22,"text":23},"async","Async",{"id":25,"text":26},"server-actions","Server Actions",{"id":28,"text":29},"network-msw","Network: MSW",{"id":31,"text":32},"playwright","Playwright",{"id":34,"text":35},"hygiene","Hygiene",{"id":37,"text":38},"ai-slop-tells","AI slop tells",{"id":40,"text":41},"done-checklist","Done checklist",{"id":43,"text":44},"testing-setup-reference","Testing setup reference","en",["Island",47],{"key":48,"result":49},"PageBody_UiefLU5FjCDBX5keSHf6NIYe3ORxjxPNqlVraym4k",{"head":50},{"style":51},[52],{"innerHTML":53},".prose[data-v-1545ba8e]{max-width:var(--measure-prose)}.prose[data-v-1545ba8e] h2{margin-block:var(--space-8) var(--space-4)}.prose[data-v-1545ba8e] h3{margin-block:var(--space-6) var(--space-3)}.prose[data-v-1545ba8e] h4{margin-block:var(--space-5) var(--space-3);font-family:var(--font-mono);font-variation-settings:\"wdth\" var(--mono-width-label);font-size:var(--text-small);text-transform:uppercase;letter-spacing:var(--text-label-ls);color:var(--color-text-muted)}.prose[data-v-1545ba8e] ol,.prose[data-v-1545ba8e] p,.prose[data-v-1545ba8e] ul{margin-block-end:var(--space-4)}.prose[data-v-1545ba8e] li{margin-block-end:var(--space-2)}.prose[data-v-1545ba8e] ol,.prose[data-v-1545ba8e] ul{padding-inline-start:var(--space-5)}.prose[data-v-1545ba8e] li:has(.task-box){list-style:none}.prose[data-v-1545ba8e] .task-box{width:.8em;height:.8em;border:var(--border-width) solid var(--color-border);vertical-align:baseline;margin-inline-end:var(--space-2);display:inline-block}.prose[data-v-1545ba8e] code{padding:1px var(--space-1);background:var(--color-surface-sunk);border:var(--border-width) solid var(--color-border)}.prose[data-v-1545ba8e] pre{padding:var(--space-4);background:var(--color-surface-sunk);border:var(--border-width) solid var(--color-border);margin-block-end:var(--space-5);overflow-x:auto}.prose[data-v-1545ba8e] pre code{background:0 0;border:0;padding:0}.prose[data-v-1545ba8e] .table-scroll{max-width:none;margin-block-end:var(--space-5);overflow-x:auto}.prose[data-v-1545ba8e] table{border-collapse:collapse;width:100%;min-width:32rem;font-size:var(--text-small);line-height:var(--text-small-lh)}.prose[data-v-1545ba8e] td,.prose[data-v-1545ba8e] th{padding:var(--space-3) var(--space-4);text-align:start;vertical-align:top;border-block-start:var(--divider-width) solid var(--color-divider)}.prose[data-v-1545ba8e] th{font-family:var(--font-mono);font-variation-settings:\"wdth\" var(--mono-width-label);font-size:var(--text-label);letter-spacing:var(--text-label-ls);text-transform:uppercase;color:var(--color-text-muted);border-block-end:var(--border-width) solid var(--color-border)}.prose[data-v-1545ba8e] blockquote{margin:0 0 var(--space-5);border-inline-start:var(--seam-width) solid var(--color-seam);color:var(--color-text-muted);padding-inline-start:var(--space-4)}.prose[data-v-1545ba8e] hr{margin-block:var(--space-7);border:0;border-block-start:var(--divider-width) solid var(--color-divider)}.prose[data-v-1545ba8e] pre,.prose[data-v-1545ba8e] table{max-width:none}",1791464219201]