The Complete Production SOP: How to Deploy and Run Cypress Component & Integration Suite in Autonomous AI Agents

---
name: cypress-suite
description: Reliable component testing and integration specs with Cypress time-travel debugging.
dependencies:
  npm:
    - cypress
---

# Cypress Component & Integration Suite

## Core Directives
1. Always verify mounting harness (`cypress/support/component.ts`) before authoring component specs.
2. Use `cy.intercept()` with named aliases for all external network requests; never allow unhandled network leaks.
3. Assert against semantic selectors or `data-testid` attributes instead of dynamic CSS classes.
4. Run headless validation via `cypress run --component` prior to finalizing deliverables.

import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
    specPattern: 'src/**/*.cy.{ts,tsx}',
    supportFile: 'cypress/support/component.ts',
  },
  e2e: {
    baseUrl: 'http://localhost:3000',
    supportFile: 'cypress/support/e2e.ts',
    video: false,
  },
});

import React from 'react';
import { UserProfile } from './UserProfile';

describe('<UserProfile /> Component Specs', () => {
  beforeEach(() => {
    cy.intercept('GET', '/api/v1/user', {
      statusCode: 200,
      body: { id: 'usr_101', name: 'Alex Developer', role: 'admin' },
    }).as('getUser');
  });

  it('renders user details and reflects state changes deterministically', () => {
    cy.mount(<UserProfile userId="usr_101" />);
    cy.wait('@getUser');
    cy.get('[data-testid="user-name"]').should('contain.text', 'Alex Developer');
    cy.get('[data-testid="user-role"]').should('contain.text', 'admin');
  });
});

#!/usr/bin/env bash
set -euo pipefail

echo "Running autonomous Cypress component test gate..."
npx cypress run --component --spec "src/**/*.cy.{ts,tsx}" --reporter spec
echo "Cypress validation completed successfully."