@testspectra/cli 1.1.6 → 1.1.8-rc.1

package/templates/nx/package.json

@@ -12,8 +12,8 @@
     "postinstall": "spectra sync-types"
   },
   "devDependencies": {
-    "@testspectra/cli": "link:../..",
-    "@testspectra/matchers": "link:../../../tools/matchers",
+    "@testspectra/cli": "^1.1.8-rc.1",
+    "@testspectra/matchers": "^1.1.8-rc.1",
     "@types/node": "^20.14.0",
     "@wdio/cli": "^9.2.8",
     "@wdio/local-runner": "^9.2.8",
@@ -25,4 +25,4 @@
     "typescript": "^5.4.5",
     "webdriverio": "^9.2.8"
   }
-}
+}

package/templates/nx/packages/matchers/e2e/specs/ApiInterception/TC-0008-fetch-mocking/mobile.test.ts

@@ -1,3 +1,27 @@
-it("should handle GET API state on Mobile", async () => {
+it("Mock and assert GET API requests using browser.intercept", async () => {
+  // Navigate to API Fetch section
   await MatchersPage.open("api-fetch");
+
+  // Setup API interception with Fixture data
+  const mock = await Spectra.intercept(
+    "/api/posts",
+    "GET",
+    Fixture.apiData.mockPosts
+  );
+
+  // Trigger fetch button in mobile demo app
+  await MatchersPage.fetchApiButton.click();
+
+  // Assert status and mocked elements
+  await MatchersPage.fetchStatusBadge.shouldHaveText("200 OK");
+  await MatchersPage.fetchedItems.shouldHaveLength(Fixture.apiData.mockPosts.length);
+  await MatchersPage.fetchedItems.first().shouldContainText(Fixture.apiData.mockPosts[0].title);
+
+  // Dynamically update fixture response
+  await mock.respondWith([
+    { id: 99, title: "Dynamic Updated Mock Title", body: "Updated on the fly" }
+  ]);
+  await MatchersPage.fetchApiButton.click();
+  await MatchersPage.fetchedItems.shouldHaveLength(1);
+  await MatchersPage.fetchedItems.first().shouldContainText("Dynamic Updated Mock Title");
 });

package/templates/nx/packages/matchers/e2e/specs/ApiInterception/TC-0008-fetch-mocking/web.test.ts

@@ -1,9 +1,9 @@
-it("should mock GET API response using browser.intercept and verify rendered items", async () => {
+it("Mock and assert GET API requests using browser.intercept", async () => {
   // Navigate to API Fetch section
   await MatchersPage.open("api-fetch");
 
   // Setup API interception with Fixture data
-  const mock = await browser.intercept(
+  const mock = await Spectra.intercept(
     "/api/posts",
     "GET",
     Fixture.apiData.mockPosts

package/templates/nx/packages/matchers/e2e/specs/ApiInterception/TC-0009-post-mocking/mobile.test.ts

@@ -1,3 +1,24 @@
-it("should handle POST API state on Mobile", async () => {
+it("Mock and assert POST API requests using browser.intercept", async () => {
+  // Navigate to API POST section
   await MatchersPage.open("api-post");
+
+  // Setup POST API interception with status 201
+  await Spectra.intercept(
+    "/api/posts",
+    "POST",
+    Fixture.apiData.mockPostResponse,
+    { statusCode: 201 }
+  );
+
+  // Fill in form fields from Fixture
+  await MatchersPage.postTitleInput.type(Fixture.apiData.mockNewPost.title);
+  await MatchersPage.postBodyInput.type(Fixture.apiData.mockNewPost.body);
+
+  // Submit POST form
+  await MatchersPage.submitPostButton.click();
+
+  // Assert response elements and status
+  await MatchersPage.postStatusBadge.shouldHaveText("201 Created");
+  await MatchersPage.postSuccessBanner.shouldBeVisible();
+  await MatchersPage.postResponseJson.shouldContainText(Fixture.apiData.mockNewPost.title);
 });

package/templates/nx/packages/matchers/e2e/specs/ApiInterception/TC-0009-post-mocking/web.test.ts

@@ -1,9 +1,9 @@
-it("should mock POST API submission using browser.intercept and verify created response", async () => {
+it("Mock and assert POST API requests using browser.intercept", async () => {
   // Navigate to API POST section
   await MatchersPage.open("api-post");
 
   // Setup POST API interception with status 201
-  await browser.intercept(
+  await Spectra.intercept(
     "/api/posts",
     "POST",
     Fixture.apiData.mockPostResponse,

package/templates/nx/packages/matchers/e2e/specs/BrowserContext/TC-0007-title-and-navigation/mobile.test.ts

@@ -1,3 +1,3 @@
-it("should verify title on Mobile", async () => {
+it("Verify page title and sidebar navigation links", async () => {
   await MatchersPage.open();
 });

package/templates/nx/packages/matchers/e2e/specs/BrowserContext/TC-0007-title-and-navigation/web.test.ts

@@ -1,4 +1,4 @@
-it("should verify browser page title, URL, diagnostics, and navigation on Web", async () => {
+it("Verify page title and sidebar navigation links", async () => {
   await MatchersPage.open();
 
   // Browser title assertions

package/templates/nx/packages/matchers/e2e/specs/ContentMatchers/TC-0005-text-and-values/mobile.test.ts

@@ -1,3 +1,3 @@
-it("should verify text on Mobile", async () => {
+it("Verify exact text, substring text, and input values", async () => {
   await MatchersPage.open("text");
 });

package/templates/nx/packages/matchers/e2e/specs/ContentMatchers/TC-0005-text-and-values/web.test.ts

@@ -1,4 +1,4 @@
-it("should verify text and value matchers on Web", async () => {
+it("Verify exact text, substring text, and input values", async () => {
   await MatchersPage.open("text");
 
   // Text assertions (positive and negative)

package/templates/nx/packages/matchers/e2e/specs/ContentMatchers/TC-0006-collections-and-empty/mobile.test.ts

@@ -1,3 +1,3 @@
-it("should verify collection length on Mobile", async () => {
+it("Verify collection lengths, counts, and empty lists", async () => {
   await MatchersPage.open("length");
 });

package/templates/nx/packages/matchers/e2e/specs/ContentMatchers/TC-0006-collections-and-empty/web.test.ts

@@ -1,4 +1,4 @@
-it("should verify collection lengths and empty lists on Web", async () => {
+it("Verify collection lengths, counts, and empty lists", async () => {
   await MatchersPage.open("length");
 
   // Receiver assertion methods

package/templates/nx/packages/matchers/e2e/specs/ElementMatchers/TC-0003-visibility-and-dom/mobile.test.ts

@@ -1,3 +1,3 @@
-it("should verify visibility on Mobile", async () => {
+it("Verify element visibility and existence matchers", async () => {
   await MatchersPage.open("visibility");
 });

package/templates/nx/packages/matchers/e2e/specs/ElementMatchers/TC-0003-visibility-and-dom/web.test.ts

@@ -1,4 +1,4 @@
-it("should verify visibility and DOM existence matchers on Web", async () => {
+it("Verify element visibility and existence matchers", async () => {
   await MatchersPage.open("visibility");
 
   // Element visibility (positive and negative)

package/templates/nx/packages/matchers/e2e/specs/ElementMatchers/TC-0004-states-and-attributes/mobile.test.ts

@@ -1,3 +1,3 @@
-it("should verify button state on Mobile", async () => {
+it("Verify button state, checkbox, radio and attributes", async () => {
   await MatchersPage.open("state");
 });

package/templates/nx/packages/matchers/e2e/specs/ElementMatchers/TC-0004-states-and-attributes/web.test.ts

@@ -1,4 +1,4 @@
-it("should verify interactivity states, classes, attributes, and CSS styling on Web", async () => {
+it("Verify button state, checkbox, radio and attributes", async () => {
   await MatchersPage.open("state");
 
   // Interactivity & state assertions

package/templates/nx/packages/matchers/e2e/specs/EnvironmentConfig/TC-0019-read-custom-environment-variable/common.test.ts

@@ -0,0 +1,5 @@
+it("Verify a custom environmentVariables entry is readable via Spectra.env", async () => {
+  if (Spectra.env.DEMO_API_MODE !== "sandbox") {
+    throw new Error(`Expected Spectra.env.DEMO_API_MODE to be "sandbox", got "${Spectra.env.DEMO_API_MODE}"`);
+  }
+});

package/templates/nx/packages/matchers/e2e/specs/EnvironmentConfig/TC-0019-read-custom-environment-variable/spec.md

@@ -0,0 +1,16 @@
+---
+id: TC-0019-read-custom-environment-variable
+title: Verify a custom environmentVariables entry is readable via Spectra.env
+priority: Medium
+caseType: Positive
+status: ready-for-automation
+coverage:
+  web: automated
+  mobile: automated
+---
+
+# Verify a custom environmentVariables entry is readable via Spectra.env
+
+## Test Steps
+1. Read the DEMO_API_MODE variable via the typed Spectra.env
+2. Assert it matches the value configured in spectra.config.ts's executionConfig.environmentVariables

package/templates/nx/packages/matchers/e2e/specs/EnvironmentConfig/suite.md

@@ -0,0 +1,9 @@
+---
+id: suite-environment-config
+name: EnvironmentConfig
+description: Reading custom executionConfig.environmentVariables values via Spectra.env
+executionOrder: 2.3
+parallel: true
+---
+
+# Suite: EnvironmentConfig

package/templates/nx/packages/playground/e2e/specs/Playground/TC-0001-form-controls/mobile.test.ts

@@ -1,3 +1,3 @@
-it("should verify playground states (Mobile)", async () => {
+it("Verify playground form inputs and default states", async () => {
   await Step.verifyPlaygroundState();
 });

package/templates/nx/packages/playground/e2e/specs/Playground/TC-0001-form-controls/web.test.ts

@@ -1,4 +1,4 @@
-it("should verify live playground form inputs and default states (Web)", async () => {
+it("Verify playground form inputs and default states", async () => {
   await Step.verifyPlaygroundState();
   await PlaygroundPage.emailInput.shouldHaveValue(Fixture.playgroundData.defaultEmail);
   await PlaygroundPage.tokenInput.shouldContainValue("JWT_");

package/templates/nx/packages/playground/e2e/specs/Playground/TC-0002-toggle-elements/mobile.test.ts

@@ -1,3 +1,3 @@
-it("should fill credentials (Mobile)", async () => {
+it("Verify typing credentials and updating playground inputs", async () => {
   await PlaygroundPage.open();
 });

package/templates/nx/packages/playground/e2e/specs/Playground/TC-0002-toggle-elements/web.test.ts

@@ -1,4 +1,4 @@
-it("should update input values and verify updated state (Web)", async () => {
+it("Verify typing credentials and updating playground inputs", async () => {
   await PlaygroundPage.open();
   await PlaygroundPage.fillCredentials("qa.expert@testspectra.dev", "JWT_custom_session_token");
   await PlaygroundPage.emailInput.shouldHaveValue("qa.expert@testspectra.dev");

package/templates/nx/shared/testing/page-objects/MatchersPage/mobile.ts

@@ -1,4 +1,4 @@
-export class MatchersPage {
+class MatchersPage {
   get visibleElement() { return Spectra.get("~visible_element"); }
   get hiddenElement() { return Spectra.get("~hidden_element"); }
   get existingElement() { return Spectra.get("~existing_element"); }

package/templates/nx/shared/testing/page-objects/MatchersPage/web.ts

@@ -1,36 +1,90 @@
-export class MatchersPage {
-  get visibleElement() { return Spectra.get("#demo-visible-el"); }
-  get hiddenElement() { return Spectra.get("#demo-hidden-el"); }
-  get existingElement() { return Spectra.get("#demo-existing-el"); }
-  get submitButton() { return Spectra.get("#demo-submit-btn"); }
-  get disabledButton() { return Spectra.get("#demo-disabled-btn"); }
-  get checkbox() { return Spectra.get("#demo-checkbox"); }
-  get radio() { return Spectra.get("#demo-radio"); }
-  get emailInput() { return Spectra.get("#demo-email-input"); }
-  get tokenInput() { return Spectra.get("#demo-token-input"); }
-  get exactText() { return Spectra.get("#demo-exact-text"); }
-  get partialText() { return Spectra.get("#demo-partial-text"); }
-  get activeTab() { return Spectra.get("#demo-active-tab"); }
-  get navLink() { return Spectra.get("#demo-nav-link"); }
-  get styledElement() { return Spectra.get("#demo-styled-el"); }
-  get focusInput() { return Spectra.get("#demo-focus-input"); }
-  get productCards() { return Spectra.getAll(".demo-product-card"); }
-  get emptyList() { return Spectra.getAll("#demo-empty-list > *"); }
+class MatchersPage {
+  get visibleElement() {
+    return Spectra.get("#demo-visible-el");
+  }
+  get hiddenElement() {
+    return Spectra.get("#demo-hidden-el");
+  }
+  get existingElement() {
+    return Spectra.get("#demo-existing-el");
+  }
+  get submitButton() {
+    return Spectra.get("#demo-submit-btn");
+  }
+  get disabledButton() {
+    return Spectra.get("#demo-disabled-btn");
+  }
+  get checkbox() {
+    return Spectra.get("#demo-checkbox");
+  }
+  get radio() {
+    return Spectra.get("#demo-radio");
+  }
+  get emailInput() {
+    return Spectra.get("#demo-email-input");
+  }
+  get tokenInput() {
+    return Spectra.get("#demo-token-input");
+  }
+  get exactText() {
+    return Spectra.get("#demo-exact-text");
+  }
+  get partialText() {
+    return Spectra.get("#demo-partial-text");
+  }
+  get activeTab() {
+    return Spectra.get("#demo-active-tab");
+  }
+  get navLink() {
+    return Spectra.get("#demo-nav-link");
+  }
+  get styledElement() {
+    return Spectra.get("#demo-styled-el");
+  }
+  get focusInput() {
+    return Spectra.get("#demo-focus-input");
+  }
+  get productCards() {
+    return Spectra.getAll(".demo-product-card");
+  }
+  get emptyList() {
+    return Spectra.getAll("#demo-empty-list > *");
+  }
 
   // API Interception & Mocking elements
-  get fetchApiButton() { return Spectra.get("#fetch-api-btn"); }
-  get fetchStatusBadge() { return Spectra.get("#fetch-status-badge"); }
-  get fetchedItems() { return Spectra.getAll(".api-fetched-item"); }
-  get fetchLoadingIndicator() { return Spectra.get("#fetch-loading-indicator"); }
-  get postTitleInput() { return Spectra.get("#post-input-title"); }
-  get postBodyInput() { return Spectra.get("#post-input-body"); }
-  get submitPostButton() { return Spectra.get("#submit-post-btn"); }
-  get postStatusBadge() { return Spectra.get("#post-status-badge"); }
-  get postSuccessBanner() { return Spectra.get("#post-success-banner"); }
-  get postResponseJson() { return Spectra.get("#post-response-json"); }
+  get fetchApiButton() {
+    return Spectra.get("#fetch-api-btn");
+  }
+  get fetchStatusBadge() {
+    return Spectra.get("#fetch-status-badge");
+  }
+  get fetchedItems() {
+    return Spectra.getAll(".api-fetched-item");
+  }
+  get fetchLoadingIndicator() {
+    return Spectra.get("#fetch-loading-indicator");
+  }
+  get postTitleInput() {
+    return Spectra.get("#post-input-title");
+  }
+  get postBodyInput() {
+    return Spectra.get("#post-input-body");
+  }
+  get submitPostButton() {
+    return Spectra.get("#submit-post-btn");
+  }
+  get postStatusBadge() {
+    return Spectra.get("#post-status-badge");
+  }
+  get postSuccessBanner() {
+    return Spectra.get("#post-success-banner");
+  }
+  get postResponseJson() {
+    return Spectra.get("#post-response-json");
+  }
 
   async open(section = "") {
-    await browser.url("/" + (section ? "#" + section : ""));
+    await Spectra.navigate("/" + (section ? "#" + section : ""));
   }
 }
 

package/templates/nx/shared/testing/page-objects/NavigationPage/mobile.ts

@@ -1,4 +1,4 @@
-export class NavigationPage {
+class NavigationPage {
   get sidebarLinks() { return Spectra.getAll("~sidebar_link"); }
 }
 

package/templates/nx/shared/testing/page-objects/NavigationPage/web.ts

@@ -1,4 +1,4 @@
-export class NavigationPage {
+class NavigationPage {
   get sidebarLinks() { return Spectra.getAll("aside a"); }
   get overviewLink() { return Spectra.get("aside a[href='#overview']"); }
   get visibilityLink() { return Spectra.get("aside a[href='#visibility']"); }

package/templates/nx/shared/testing/page-objects/PlaygroundPage/mobile.ts

@@ -1,4 +1,4 @@
-export class PlaygroundPage {
+class PlaygroundPage {
   get visibleElement() { return Spectra.get("~visible_element"); }
   get hiddenElement() { return Spectra.get("~hidden_element"); }
   get existingElement() { return Spectra.get("~existing_element"); }

package/templates/nx/shared/testing/page-objects/PlaygroundPage/web.ts

@@ -1,4 +1,4 @@
-export class PlaygroundPage {
+class PlaygroundPage {
   get visibleElement() { return Spectra.get("#demo-visible-el-pg"); }
   get hiddenElement() { return Spectra.get("#demo-hidden-el-pg"); }
   get existingElement() { return Spectra.get("#demo-existing-el-pg"); }
@@ -19,7 +19,7 @@ export class PlaygroundPage {
   get emptyList() { return Spectra.getAll("#demo-empty-list-pg > *"); }
 
   async open() {
-    await browser.url("/#playground");
+    await Spectra.navigate("/#playground");
   }
 
   async fillCredentials(email = Fixture.playgroundData.defaultEmail, token = Fixture.playgroundData.defaultToken) {

package/templates/nx/shared/testing/support/actions/fillCredentials/mobile.action.ts

@@ -1,4 +1,4 @@
-export default async function fillCredentials(this: any, email: string, token: string) {
+export default async function (this: any, email: string, token: string) {
   await this.get("~email_input").type(email);
   await this.get("~token_input").type(token);
 }

package/templates/nx/shared/testing/support/actions/fillCredentials/web.action.ts

@@ -1,4 +1,4 @@
-export default async function fillCredentials(this: any, email: string, token: string) {
+export default async function (this: any, email: string, token: string) {
   await this.get("#demo-email-input-pg").type(email);
   await this.get("#demo-token-input-pg").type(token);
 }

package/templates/nx/shared/testing/support/steps/togglePlaygroundStates/mobile.step.ts

@@ -1,3 +1,3 @@
-export default async function togglePlaygroundStates() {
+export default async function () {
   await PlaygroundPage.open();
 }

package/templates/nx/shared/testing/support/steps/togglePlaygroundStates/web.step.ts

@@ -1,4 +1,4 @@
-export default async function togglePlaygroundStates() {
+export default async function () {
   await PlaygroundPage.open();
   await PlaygroundPage.hiddenElement.shouldBeVisible();
   await PlaygroundPage.existingElement.shouldExist();

package/templates/nx/shared/testing/support/steps/verifyPlaygroundState/mobile.step.ts

@@ -1,4 +1,4 @@
-export default async function verifyPlaygroundState() {
+export default async function () {
   await PlaygroundPage.open();
   await PlaygroundPage.visibleElement.shouldBeVisible();
 }

package/templates/nx/shared/testing/support/steps/verifyPlaygroundState/web.step.ts

@@ -1,4 +1,4 @@
-export default async function verifyPlaygroundState() {
+export default async function () {
   await PlaygroundPage.open();
   await PlaygroundPage.visibleElement.shouldBeVisible();
   await PlaygroundPage.enabledButton.shouldBeEnabled();

package/templates/nx/spectra.config.ts

@@ -6,22 +6,12 @@ export default defineConfig({
     maxConcurrentSessions: "1",
     headless: true,
     implicitWait: "5000",
-    pageLoadTimeout: "30000",
-    scriptTimeout: "30000",
     parallelizationMode: "testcase",
   },
-  browsers: [
-    {
-      id: "chrome-desktop",
-      type: "chrome",
-      mobileEmulation: false,
-    },
-  ],
   androidConfig: {
     driverServer: "tcp://127.0.0.1:8200",
     appPackage: "",
     appActivity: "",
-    autoGrantPermissions: true,
     noReset: false,
     implicitWait: "10000",
     parallelizationMode: "suite",
@@ -52,17 +42,11 @@ export default defineConfig({
       },
     ],
   },
-  loadConfig: {
-    virtualUsers: "10",
-    duration: "1m",
-  },
-  loadStages: [],
-  thresholds: [],
   executionConfig: {
     networkMonitoringEnabled: true,
     fastResponseTime: "200",
     normalResponseTime: "1000",
     monitoredDomains: [],
-    environmentVariables: [],
+    environmentVariables: { DEMO_API_MODE: "sandbox" },
   },
 });

package/templates/react-component/.cursorrules

@@ -0,0 +1,17 @@
+# TestSpectra AI Instructions for Cursor
+
+You are developing automated tests and React components with the TestSpectra testing framework.
+
+## Key Rules & Conventions
+1. **Zero-Import Standard**: Never add manual `import` statements for Page/Component Objects (`ButtonComponent`, `BadgeComponent`, `InputComponent`), Steps (`Step.*`), Fixtures (`Fixture.*`), or Actions (`Spectra.*`). All typings are provided globally and ambiently via `.testspectra/types/`.
+2. **Component Testing Pattern**: Mount React components using `await Spectra.mount(<Component />)` (real JSX and static component imports are allowed in `*.test.tsx` files, unlike zero-import `*.web.test.ts` E2E specs), then inspect and interact using `Spectra.get(...)` / `Spectra.getAll(...)` or Page/Component Objects. Each `Spectra.mount()` call replaces the previous mount automatically — no cleanup command needed. Run via `spectra test` (a separate suite from E2E's `spectra run`).
+3. **Platform Separation**:
+   - `web.test.ts` / `web.test.tsx` / `web.ts`: Web / Browser component implementations.
+   - `common.test.ts` / `common.ts`: Cross-platform shared implementations.
+4. **CamelCase Naming Convention**:
+   - Component Objects (`page-objects/ButtonComponent/`, `page-objects/BadgeComponent/`)
+   - Reusable Actions (`support/actions/fillInputField/`)
+   - Reusable Steps (`support/steps/verifyButtonState/`)
+5. **Spec-as-Code**:
+   - Suites are defined in `specs/<suite-name>/suite.md` with YAML frontmatter (`id`, `name`, `executionOrder`, `tags`).
+   - Test cases are defined in `specs/<suite-name>/<TC-ID-slug>/spec.md` with YAML frontmatter (`id`, `title`, `priority`, `coverage`).

package/templates/react-component/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "testspectra.testspectra-vscode"
+  ]
+}

package/templates/react-component/CLAUDE.md

@@ -0,0 +1,14 @@
+# TestSpectra React Component Testing Workspace
+
+## Commands
+- `pnpm test` or `spectra test` — Run the component test suite (bundled Vitest browser mode via `@testspectra/react`)
+- `pnpm run test:headed` — Run component tests with a visible browser window
+- `pnpm run sync-types` — Scan workspace and regenerate ambient `.testspectra/types/`
+- `pnpm run type-check` — Type check with `tsc -b`
+
+## Architecture Rules
+
+1. Zero-import standard for `Spectra.*`, `ButtonComponent`, `BadgeComponent`, `InputComponent`, `Step.*`, and `Fixture.*` — these stay ambient globals, auto-discovered from `page-objects/`, `support/steps/`, and `fixtures/`.
+2. Component testing uses `Spectra.mount(<Component />)` — real JSX, real static imports for the component under test are allowed and expected in `*.test.tsx` files (unlike `*.web.test.ts` E2E specs). `Spectra.mount()` always replaces whatever was previously mounted; no manual cleanup call is needed between tests.
+3. Component tests are a **separate test suite** from E2E (`spectra run`) — they live in `specs/<Suite>/<TC-ID>/web.test.tsx` alongside `spec.md`, run via `spectra test`, not `spectra run`. See `docs/v2/features/component-testing/react/`.
+4. Assertions use the same TestSpectra DSL as E2E (`Spectra.get().shouldBeVisible()`, `.shouldHaveText()`, etc.) — nothing new to learn beyond `Spectra.mount()`.

package/templates/react-component/README.md

@@ -0,0 +1,69 @@
+# TestSpectra React Component Testing Template
+
+A high-performance, real-browser React component testing template powered by **TestSpectra**, **WebdriverIO Browser Runner**, and **Testing Library**.
+
+## 🚀 Features
+
+- **Direct Component Mounting**: Mount TSX components directly in real Chromium/Blink engines using `@testing-library/react`.
+- **Zero Mock Browser**: Real layout calculations, CSS rendering, focus states, and browser events without JSDOM/HappyDOM limitations.
+- **Fast Vite HMR Core**: Instant test startup powered by Vite bundler inside the browser runner.
+- **TestSpectra Matchers**: Comprehensive semantic assertions (`.shouldBeVisible()`, `.shouldExist()`, `expect(el).toHaveText()`).
+
+## 📁 Directory Structure
+
+```
+.
+├── spectra.config.ts        # TestSpectra centralized configuration
+├── wdio.conf.ts             # WebdriverIO Browser Runner + Vite config
+├── tsconfig.json            # TypeScript configuration for JSX & runner types
+└── src/
+    ├── components/          # React components and tests
+    │   ├── Button/
+    │   │   ├── Button.tsx
+    │   │   └── Button.test.tsx
+    │   ├── Badge/
+    │   │   ├── Badge.tsx
+    │   │   └── Badge.test.tsx
+    │   └── Input/
+    │       ├── Input.tsx
+    │       └── Input.test.tsx
+    └── test-utils.tsx       # Common testing helpers & providers
+```
+
+## 🛠️ Usage & Commands
+
+```bash
+# Run all component tests
+pnpm test
+
+# Run component tests in headless mode
+pnpm run test:headless
+
+# Run tests in high-concurrency chunked worker mode
+pnpm run test:chunked
+
+# Type check
+pnpm run type-check
+```
+
+## 📝 Writing Component Tests
+
+```tsx
+import React from 'react';
+import { render } from '@testing-library/react';
+import { expect, $ } from '@wdio/globals';
+import { Button } from './Button';
+
+describe('Button Component', () => {
+  it('renders label and handles user clicks', async () => {
+    let clicked = false;
+    render(<Button label="Submit" onClick={() => (clicked = true)} />);
+
+    const button = await $('button=Submit');
+    await expect(button).toBeDisplayed();
+
+    await button.click();
+    expect(clicked).toBe(true);
+  });
+});
+```

package/templates/react-component/fixtures/component-mock.json

@@ -0,0 +1,12 @@
+{
+  "user": {
+    "name": "Alex Mercer",
+    "role": "Developer",
+    "status": "active"
+  },
+  "labels": {
+    "save": "Save Changes",
+    "cancel": "Cancel",
+    "delete": "Delete Item"
+  }
+}

package/templates/react-component/global-hooks/after/web.hook.ts

@@ -0,0 +1,3 @@
+export default async function () {
+  // Global after hook for web component testing suite
+}

package/templates/react-component/global-hooks/before/web.hook.ts

@@ -0,0 +1,3 @@
+export default async function () {
+  // Global before hook for web component testing suite
+}