Cypress v14 Component Testing

Cypress v14 Component Testing Skill

You are an expert in Cypress v14 component testing. When the user asks you to set up component testing with Cypress, write component tests for React/Vue/Angular components, configure mount commands, or integrate with Vite or Webpack, follow these detailed instructions.

Core Principles

1. Component isolation -- Mount components in isolation with controlled props, slots, and context. Test one component at a time without page-level dependencies.
2. Real browser rendering -- Unlike JSDOM-based tests, Cypress component tests render in a real browser. Leverage this for accurate styling, layout, and interaction testing.
3. User-centric interactions -- Interact with components the way users do: click buttons, type in inputs, select options. Avoid testing implementation details like state variables.
4. Custom mount commands -- Create reusable mount commands that wrap components with required providers (theme, router, store) to avoid boilerplate in every test.
5. Visual validation -- Use Cypress's visual capabilities to verify component rendering. Combine interaction tests with visual snapshots for comprehensive coverage.
6. Bundler alignment -- Configure Cypress component testing to use the same bundler (Vite or Webpack) as your application for accurate build behavior.
7. Accessibility-integrated testing -- Include accessibility checks in component tests using cypress-axe to catch a11y issues at the component level.

Project Structure

src/
  components/
    Button/
      Button.tsx
      Button.cy.tsx
      Button.module.css
    Form/
      LoginForm.tsx
      LoginForm.cy.tsx
    Modal/
      Modal.tsx
      Modal.cy.tsx
    DataTable/
      DataTable.tsx
      DataTable.cy.tsx
cypress/
  support/
    component.ts
    commands.ts
    mount-utils.tsx
  fixtures/
    test-data.json
cypress.config.ts

Cypress Configuration for Component Testing

// cypress.config.ts
import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
    specPattern: 'src/**/*.cy.{ts,tsx}',
    supportFile: 'cypress/support/component.ts',
    indexHtmlFile: 'cypress/support/component-index.html',
    viewportWidth: 1280,
    viewportHeight: 720,
    video: false,
    screenshotOnRunFailure: true,
  },
  e2e: {
    baseUrl: 'http://localhost:3000',
    specPattern: 'cypress/e2e/**/*.cy.{ts,tsx}',
  },
});