/appbuilder-testing

name: appbuilder-testing
description: >-
  Generate and run tests for Adobe App Builder actions and UI components. Scaffolds Jest unit tests,
  integration tests against deployed actions, contract tests for Adobe API interactions, and React
  component tests using Testing Library. Provides mock helpers for State, Files, Events SDKs,
  @adobe/aio-lib-* clients, ExC Shell context (@adobe/exc-app), and UIX Guest SDK (@adobe/uix-guest).
  Use this skill whenever the user mentions testing App Builder actions, writing unit tests for
  Runtime actions, creating integration tests, mocking Adobe SDKs, setting up test fixtures, running
  aio app test, or wants to verify action behavior before deployment. Also trigger when users mention
  Jest configuration for App Builder, test coverage, CI test setup, React component test, Testing
  Library, UI test, Provider wrapper, test my page, test my form, test my table, test my component,
  mock shell context, mock extension context, debug test failures, or fix Jest errors.
metadata:
  category: testing
license: Apache-2.0
compatibility: Requires aio CLI, Node.js 18+, and Jest
allowed-tools: Bash(aio:*) Bash(npm:*) Bash(node:*) Bash(npx:*) Read Write Edit

App Builder Testing

Generate and run Jest tests for Adobe App Builder actions and React Spectrum UI components. Scaffolds unit tests, integration tests, component tests, and mock helpers for Adobe SDKs.

Pattern Quick-Reference

Pick the template or reference that matches the user's intent. Default to `assets/unit-test-template.js` for generic test requests.

| User wants | Reference | Template / Asset | | --- | --- | --- | | Unit test for an existing action | references/testing-patterns.md | assets/unit-test-template.js | | Integration test against deployed action | references/testing-patterns.md | assets/integration-test-template.js | | Component test for React Spectrum UI | references/component-testing-patterns.md | assets/component-test-template.js | | Mock ExC Shell context in tests | references/component-testing-patterns.md | assets/shell-mock-helper.js | | Mock AEM extension context in tests | references/component-testing-patterns.md | assets/uix-guest-mock-helper.js | | Mock State SDK in tests | references/mock-catalog.md | assets/mock-state-sdk.js | | Mock Files SDK in tests | references/mock-catalog.md | assets/mock-files-sdk.js | | Mock Events SDK in tests | references/mock-catalog.md | assets/mock-events-sdk.js | | Mock Database SDK in tests | references/mock-catalog.md | assets/mock-database-sdk.js | | Full mock catalog (all SDKs) | references/mock-catalog.md | — | | Contract test for API interactions | references/testing-patterns.md | — | | Pre-deployment verification | references/checklist.md | — | | Debug test failures | references/debugging.md | — |

Fast Path (for clear requests)

When the user's request maps unambiguously to a single pattern above — they name a specific test type, reference a template, or describe a use case that clearly matches one entry — skip straight to generation. Use the matched template and proceed directly.

Examples of fast-path triggers:

• "Write tests for my action" → Read the action source, use `assets/unit-test-template.js`, generate immediately
• "Help me mock State SDK" → Use `assets/mock-state-sdk.js`, inject into test file
• "Add integration tests" → Use `assets/integration-test-template.js`, configure for deployed action
• "Run tests with coverage" → Execute `npx jest --coverage` or `aio app test`
• "Test my component/page/form/table" → Read the component source, use `assets/component-test-template.js`, wrap in Provider
• "Mock shell context" → Use `assets/shell-mock-helper.js`, inject into test file
• "Test my AEM extension component" → Use `assets/uix-guest-mock-helper.js` + `assets/component-test-template.js`

If there is any ambiguity — multiple test types needed, project structure unclear, or the user hasn't specified enough — fall through to the full workflow below.

Quick Reference

• **Test directory:** Place test files in `test/` mirroring the action path, e.g., `test/actions/<action-name>/index.test.js`.
• **Jest configuration:** App Builder projects use Jest by default. Config lives in `package.json` or `jest.config.js`.
• **Test command:** `aio app test` (wrapper) or `npx jest --coverage` (direct).
• **Mock pattern:** Use `jest.mock()` at the top of test files to mock Adobe SDK dependencies before importing the action.
• **Response shape:** All actions return `{ statusCode, body }` — assert both in every test.
• **Error paths:** Always test 200 (success), 400 (bad input), and 500 (SDK failure) scenarios.
• **CommonJS:** Action test files use `require()` and `module.exports` (not ES imports).
• **Component test directory:** `test/web-src/components/<ComponentName>.test.js` (or `test/components/`).
• **Provider wrapper:** Always wrap in `<Provider theme={defaultTheme}>` — Spectrum renders nothing without it.
• **ARIA selectors:** Use `getByRole()`, not CSS classes — see `references/component-testing-patterns.md` selector table.
• **Async testing:** Use `findBy*` for data that appears async, `queryBy*` for absence, `waitFor` for state changes.

Full Workflow (for ambiguous or complex requests)

1. **Scan project structure** — Check for existing `test/` directory, `jest.config.js`, and test scripts in `package.json`. Scan both `src/` for actions AND `web-src/` for UI components. 2. **Identify targets to test** — Parse `ext.config.yaml` (or `app.config.yaml`) for declared actions and their source paths. Check `web-src/src/components/` for React components. 3. **Determine test types needed** — Unit tests for logic, integration tests for deployed actions, contract tests for API interactions. 4. **For each action:**a. Read the action source to identify SDK dependencies (State, Files, Events, Logger, etc.).b. Generate unit test using `assets/unit-test-template.js` as the base.c. Inject appropriate mocks from `references/mock-