aem-skill-testing-blocks

Run npm run lint and npm run build first, then load the block's test content at http://localhost:3000 in a browser. Validate rendering at mobile, tablet, and desktop viewports, check for console errors, and capture screenshots as proof.

Write a temporary Playwright script that launches Chromium, navigates to the local test URL, waits for the block selector, and screenshots at 375px, 768px, and 1200px widths. Run it with npx tsx, then delete the script since browser tests are not committed.

Write unit tests only for logic-heavy utilities, data transformations, API integrations, and shared helpers used across blocks. Skip unit tests for DOM manipulation, CSS-only changes, and block decoration logic, which are better validated in a browser.

Install vitest, jsdom, and optionally @vitest/coverage-v8, then create vitest.config.ts with the @/* path alias and jsdom environment. Add test scripts to package.json and include the test/ directory in tsconfig.json.

This project configures tsc with noEmit: true, so TypeScript only type-checks while Vite handles compilation. Errors appear in the terminal but do not block dev mode, so always run npm run build to see the full error list before a PR.

Confirm the test file exists at drafts/{name}.plain.html and the URL omits the extension: http://localhost:3000/drafts/{name}. Also verify the dev server is running via npm run start rather than bare aem up.