experience-lwc-accessibility-jest-run
Runs accessibility tests on Lightning Web Components to catch problems before pushing code and ensure your app works for everyone.
Installation
Paste this into Claude Code, Cursor, or any agent that can run commands.
SKILL.mdShow the author's original SKILL.md
---
name: experience-lwc-accessibility-jest-run
description: "Use ALWAYS when running Sa11y accessibility Jest tests for an LWC — locally before pushing, producing the command(s), running one file vs a suite, selecting tests by naming convention, saving Sa11y-rendered HTML, or reproducing a Sa11y/A11yBug failure. Covers core (Bazel; `bazel test //<module>:<target>`) and standalone `npx jest` (`.accessibility.test.js`, `@sa11y/jest`). REQUIRED for a `run-plan.md`, a failing a11y test's exit code, or `SA11Y_*`/`A11yBug`/core-Bazel test paths. DO NOT TRIGGER for functional Jest tests, a11y review without running tests (use experience-accessibility-validate), or Selenium-based a11y tests."
metadata:
version: "1.0"
domains: ["Experience"]
relatedSkills:
- "experience-accessibility-validate"
cliTools:
- tool: ["node"]
semver: ">=18.0.0"
- tool: ["npm"]
semver: ">=8.0"
---
<!-- a11y-expert-managed-skill -->
# Running LWC Accessibility Jest Tests
Run Sa11y accessibility unit tests on Lightning Web Components in either:
- **Core (Bazel)** — when a `WORKSPACE` file is present.
- **Standalone (Jest)** — when there's no `WORKSPACE`.
Selenium-level reproductions, GUS A11yBug ingestion, and other internal
Salesforce-only flows are out of scope for this skill. For source-code-level
WCAG review without running tests, see `experience-accessibility-validate`.
## When to Use This Skill
- User wants to run accessibility unit tests (Sa11y Jest) locally before
pushing a fix.
- User has a known failing test file path (e.g. from an A11yBug's
`Test_Names__c`) and wants to target it directly.
- User is iterating on an accessibility fix and needs the fastest
pass/fail signal.
## Prerequisites
- For Bazel Jest tests: a Salesforce core build environment (a `WORKSPACE`
file is present).
- For standalone Jest tests: `@sa11y/jest` installed and configured.
## Workflow
Choose the approach based on the environment. If this is not a Salesforce core
build environment, do not mention the Core workflow.
### Core (Bazel)
Use this mode when a `WORKSPACE` file is present. The base command is:
```bash
{coreRootPath}/tools/bazel test [TARGET] --test_output=streamed --test_env=SA11Y_AUTO=1 --test_env=SA11Y_ENABLE_DOM_MUTATION_OBSERVER=1
```
Replace `{coreRootPath}` with the Core repository root, `{moduleName}` with the
module name, and `{relativePath}` with the test file path without the `.test.js`
extension.
To discover targets and paths:
```bash
find {coreRootPath}/{moduleName} -name "*.test.js" -type f
{coreRootPath}/tools/bazel query "tests(//{moduleName}:*)"
```
Component tests typically live under
`modules/{componentDir}/{componentName}/__tests__/`.
Prefer a single-file target when the failing test path is known:
```bash
{coreRootPath}/tools/bazel test //{moduleName}:{relativePath} --test_output=streamed --test_env=SA11Y_AUTO=1 --test_env=SA11Y_ENABLE_DOM_MUTATION_OBSERVER=1
```
Run all Sa11y Jest tests in a module when a specific test is not known:
```bash
{coreRootPath}/tools/bazel test //{moduleName}:sa11y_jest_test --test_output=streamed --test_env=SA11Y_AUTO=1 --test_env=SA11Y_ENABLE_DOM_MUTATION_OBSERVER=1
```
Multiple module targets can be passed to the same command. To filter tests
within a module, add `--test_arg=--testMatch="**/{modulePath}/**"`.
Useful options:
- Update snapshots: `--test_arg="--updateSnapshot"`
- Disable cached test results: `--cache_test_results=no`
- Save rendered HTML:
`--test_env=SA11Y_ENABLE_RENDERED_DOM_SAVE=1 --test_env=SA11Y_RENDERED_DOM_SAVE_PATH=sfdc-test/unit/javascript/htdocs/sa11y/jest`
Use `sfdc-test/unit/javascript/htdocs/sa11y/jest` as the rendered DOM save path
to avoid EPERM errors.
### Standalone (Jest)
Use this mode when no `WORKSPACE` file is present. Run all accessibility tests:
Do **not** prepend `SA11Y_*` environment variables in standalone mode;
`@sa11y/jest` is activated through the project's Jest setup.
```bash
npm test -- --testMatch="**/*.accessibility.test.js"
```
Or target a specific file:
```bash
npm test -- src/components/MyComponent/__tests__/MyComponent.accessibility.test.js
```
Use the filename or path supplied by the user. When the named test is in the
current directory, keep a bare filename bare instead of inventing a path.
Other useful options are `--coverage`, `--updateSnapshot`, `--watch`, and
`--verbose`. To target a named test, use
`npm test -- --testNamePattern="MyComponent accessibility"`.
Ensure Jest uses a `jsdom` environment and loads the project's `@sa11y/jest`
setup file. Copy or adapt the bundled `assets/jest.config.js` template into
the project's Jest configuration, and copy `assets/sa11y-jest-setup.js` to
`test/setup/sa11y-setup.js`. If the project already has a Jest configuration,
merge the relevant settings instead of overwriting unrelated configuration.
The `SA11Y_*` variables shown above are for Core/Bazel only; the Bazel commands
already include them.
## Response Scope
Answer only what the user asked. Emit the requested command or commands plus
the relevant exit-code meaning. Do not add watch, coverage, snapshot-update,
HTML-save, or other variants unless the user requests them.
## Expected Exit Codes
- Bazel: `0` means all tests passed, `3` means tests failed, and `1` means the
build or command failed.
- Jest: `0` means all tests passed and `1` means tests failed or an error
occurred.
## Verification Checklist
- [ ] Sa11y Jest run completed with a clear pass/fail signal (exit 0 or 3
for Bazel; exit 0 or 1 for Jest).
- [ ] If snapshots were intentionally updated, the new snapshots are
committed alongside the fix.
## Troubleshooting
- **Bazel test "not found"** — the target path is off. Remember to drop the
`.test.js` extension in `{relativePath}`.
- **HTML saving fails with EPERM** — use the prescribed save path
`sfdc-test/unit/javascript/htdocs/sa11y/jest`.
- **Standalone tests do not run** — verify the test naming pattern, Jest
configuration, `@sa11y/jest` dependency, and `jsdom` environment.
Ships with 2 supporting files:
- assets/jest.config.js
- assets/sa11y-jest-setup.js
Mirrored from the author's public source. Install counts from the open skills registry.