Cypress Component Testing

import { defineConfig } from 'cypress';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
    video: false,
  },
});

import { defineConfig } from 'cypress';
import customViteConfig from './vite.config.custom';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
      // an object...
      viteConfig: customViteConfig,
      // ...or a function evaluated at run time, merged with the detected vite.config
      // viteConfig: async () => ({ ...(await import('./vite.config')).default }),
    },
  },
});

import { defineConfig } from 'cypress';
import { devServer as viteDevServer } from '@cypress/vite-dev-server';

export default defineConfig({
  component: {
    devServer(cypressDevServerConfig) {
      return viteDevServer({
        ...cypressDevServerConfig,
        framework: 'react',
        viteConfig: async () => (await import('./vite.config')).default,
      });
    },
  },
});

export default defineConfig({
  component: {
    devServer: { framework: 'react', bundler: 'vite' },
    specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
  },
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Components App</title>
  </head>
  <body>
    <div data-cy-root></div>
  </body>
</html>

import { mount } from 'cypress/react';
import '../../src/index.css';

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount;
    }
  }
}

Cypress.Commands.add('mount', mount);

import { StepperComponent } from './stepper.component';
import { mount, createOutputSpy } from 'cypress/angular';

it('emits the incremented value', () => {
  mount(StepperComponent, {
    componentProperties: { change: createOutputSpy('changeSpy') },
  });
  cy.get('[data-cy=increment]').click();
  cy.get('@changeSpy').should('have.been.calledWith', 1);
});

import type { App } from 'vue';

export const messages: Record<string, string> = { greeting: 'Welcome to the Bookshelf' };

export const i18n = {
  install(app: App) {
    app.config.globalProperties.$t = (key: string) => messages[key] ?? key;
  },
};

<template>
  <h1 data-cy="greeting">{{ $t('greeting') }}</h1>
</template>

import { mount } from 'cypress/vue';
import '../../src/index.css';
import { i18n } from '../../src/i18n';

type MountParams = Parameters<typeof mount>;

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount;
    }
  }
}

// Wrap every mount with the plugins the real application installs in main.ts.
Cypress.Commands.add('mount', (component: MountParams[0], options: MountParams[1] = {}) => {
  options.global = options.global || {};
  options.global.plugins = options.global.plugins || [];
  options.global.plugins.push(i18n);
  return mount(component, options);
});

import Greeting from './Greeting.vue';

describe('<Greeting />', () => {
  it('uses the plugin installed by the custom cy.mount()', () => {
    cy.mount(Greeting);
    cy.get('[data-cy=greeting]').should('have.text', 'Welcome to the Bookshelf');
  });
});

import { mount } from 'cypress/react';
import { MemoryRouter } from 'react-router-dom';

Cypress.Commands.add('mount', (component, options = {}) => {
  const { routerProps = { initialEntries: ['/'] }, ...mountOptions } = options;
  const wrapped = <MemoryRouter {...routerProps}>{component}</MemoryRouter>;
  return mount(wrapped, mountOptions);
});

import { mount } from 'cypress/react';
import { Provider } from 'react-redux';
import { getStore } from '../../src/store';

Cypress.Commands.add('mount', (component, options = {}) => {
  // Use the default store if one is not provided
  const { reduxStore = getStore(), ...mountOptions } = options;
  const wrapped = <Provider store={reduxStore}>{component}</Provider>;
  return mount(wrapped, mountOptions);
});

import { Type } from '@angular/core';
import { mount, MountConfig, MountResponse } from 'cypress/angular';
import { ButtonComponent } from 'src/app/button/button.component';
import { CardComponent } from 'src/app/card/card.component';

const declarations = [ButtonComponent, CardComponent];

function customMount<T>(component: string | Type<T>, config?: MountConfig<T>) {
  if (!config) {
    config = { declarations };
  } else {
    config.declarations = [...(config?.declarations || []), ...declarations];
  }
  return mount<T>(component, config);
}

declare global {
  namespace Cypress {
    interface Chainable {
      mount<T>(component: string | Type<T>, config?: MountConfig<T>): Cypress.Chainable<MountResponse<T>>;
    }
  }
}

Cypress.Commands.add('mount', customMount);

type Props = {
  value: number;
  onChange: (value: number) => void;
  max?: number;
  readOnly?: boolean;
};

export function RatingStars({ value, onChange, max = 5, readOnly = false }: Props) {
  return (
    <div className="stars" role="radiogroup" aria-label="Rating">
      {Array.from({ length: max }, (_, i) => i + 1).map(n => (
        <button
          key={n}
          type="button"
          role="radio"
          aria-checked={n === value}
          aria-label={`${n} star${n === 1 ? '' : 's'}`}
          disabled={readOnly}
          onClick={() => onChange(n)}
        >
          {n <= value ? '★' : '☆'}
        </button>
      ))}
    </div>
  );
}

import { useState } from 'react';
import { RatingStars } from './RatingStars';

describe('<RatingStars />', () => {
  it('shows the current value and reports clicks', () => {
    const onChange = cy.spy().as('onChange');
    cy.mount(<RatingStars value={2} onChange={onChange} />);

    cy.getByRole('radio', { name: '2 stars', native: false }).should('have.attr', 'aria-checked', 'true');
    cy.getByRole('radio', { name: '5 stars', native: false }).click();

    cy.get('@onChange').should('have.been.calledOnceWithExactly', 5);
  });

  it('keeps its own state when wrapped in a stateful parent', () => {
    function Controlled() {
      const [value, setValue] = useState(2);
      return <RatingStars value={value} onChange={setValue} />;
    }
    cy.mount(<Controlled />);

    cy.getByRole('radio', { name: '5 stars', native: false }).click();
    cy.getByRole('radio', { name: '5 stars', native: false }).should('have.attr', 'aria-checked', 'true');
    cy.getByRole('radio', { name: '2 stars', native: false }).should('have.attr', 'aria-checked', 'false');
  });

  it('ignores clicks when read-only', () => {
    const onChange = cy.stub().as('onChange');
    cy.mount(<RatingStars value={3} onChange={onChange} readOnly />);

    cy.getByRole('radio', { native: false }).should('have.length', 5);
    cy.getByRole('radio', { name: '1 star', native: false }).should('be.disabled');
    cy.getByRole('radio', { name: '1 star', native: false }).click({ force: true });
    cy.get('@onChange').should('not.have.been.called');
  });

  it('re-renders with new props through rerender()', () => {
    cy.mount(<RatingStars value={1} onChange={() => {}} readOnly />).then(({ rerender }) => {
      rerender(<RatingStars value={4} onChange={() => {}} readOnly />);
    });
    cy.getByRole('radio', { name: '4 stars', native: false }).should('have.attr', 'aria-checked', 'true');
  });
});

import type { ReactNode } from 'react';

type Props = {
  title: string;
  expanded: boolean;
  setExpanded: (expanded: boolean) => void;
  children?: ReactNode;
};

export function Expandable({ title, expanded, setExpanded, children }: Props) {
  return (
    <section className="expandable">
      <button type="button" aria-expanded={expanded} onClick={() => setExpanded(!expanded)}>
        {title}
      </button>
      {expanded && <div className="body">{children}</div>}
    </section>
  );
}

import { Expandable } from './Expandable';

describe('<Expandable />', () => {
  it('shows the body only when expanded', () => {
    const setExpanded = cy.spy().as('setExpanded');
    cy.mount(
      <Expandable title="Description" expanded={false} setExpanded={setExpanded}>
        A story about a lighthouse.
      </Expandable>,
    );

    cy.contains('A story about a lighthouse.').should('not.exist');
    cy.getByRole('button', { name: 'Description' }).should('have.attr', 'aria-expanded', 'false').click();
    cy.get('@setExpanded').should('have.been.calledWith', true);

    cy.mount(
      <Expandable title="Description" expanded setExpanded={setExpanded}>
        A story about a lighthouse.
      </Expandable>,
    );
    cy.contains('A story about a lighthouse.').should('be.visible');
  });

  it('is rendered with the global stylesheet', () => {
    cy.mount(<Expandable title="Styled" expanded setExpanded={() => {}}>Body</Expandable>);
    cy.get('.expandable .body').should('have.css', 'margin-top', '8px');
    cy.get('body').should('have.css', 'font-family').and('match', /system-ui/);
  });
});

import { useEffect, useState } from 'react';

type Review = { id: number; author: string; rating: number; text: string };

export function ReviewList({ bookId }: { bookId: number }) {
  const [reviews, setReviews] = useState<Review[] | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetch(`/api/reviews?bookId=${bookId}`)
      .then(response => {
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json() as Promise<Review[]>;
      })
      .then(setReviews)
      .catch(e => setError(String(e.message)));
  }, [bookId]);

  if (error) return <p role="alert">Could not load reviews: {error}</p>;
  if (!reviews) return <p aria-busy="true">Loading reviews…</p>;
  if (reviews.length === 0) return <p>No reviews yet.</p>;
  return (
    <ul aria-label="Reviews">
      {reviews.map(r => (
        <li key={r.id}>
          <strong>{r.author}</strong> ({r.rating}/5): {r.text}
        </li>
      ))}
    </ul>
  );
}

[
  { "id": 1, "author": "reader", "rating": 5, "text": "Clear, calm and surprisingly funny." },
  { "id": 2, "author": "admin", "rating": 4, "text": "Great chapter on build pipelines." }
]

import { ReviewList } from './ReviewList';

describe('<ReviewList />', () => {
  it('renders the reviews returned by the API', () => {
    cy.intercept('GET', '/api/reviews?bookId=1', { fixture: 'reviews.json' }).as('reviews');
    cy.mount(<ReviewList bookId={1} />);

    cy.wait('@reviews');
    cy.getByRole('list', { name: 'Reviews' }).find('li').should('have.length', 2);
    cy.contains('li', 'reader').should('contain.text', '(5/5)');
  });

  it('shows a loading state while the request is pending', () => {
    cy.intercept('GET', '/api/reviews*', { body: [], delay: 500 });
    cy.mount(<ReviewList bookId={1} />);

    cy.get('[aria-busy=true]').should('contain.text', 'Loading reviews');
    cy.contains('No reviews yet.').should('be.visible');
  });

  it('shows an error when the server fails', () => {
    cy.intercept('GET', '/api/reviews*', { statusCode: 500, body: {} });
    cy.mount(<ReviewList bookId={1} />);

    cy.getByRole('alert').should('contain.text', 'HTTP 500');
  });
});

import { createContext, useContext, type ReactNode } from 'react';

const ThemeContext = createContext<'light' | 'dark'>('light');

export function ThemeProvider({ theme, children }: { theme: 'light' | 'dark'; children: ReactNode }) {
  return (
    <ThemeContext.Provider value={theme}>
      <div data-theme={theme}>{children}</div>
    </ThemeContext.Provider>
  );
}

export function ThemeBadge() {
  const theme = useContext(ThemeContext);
  return <span data-cy="theme-badge">Theme: {theme}</span>;
}

export function Broken({ user }: { user?: { name: string } }) {
  return <p>{user!.name}</p>;
}

import { ThemeBadge, ThemeProvider, Broken } from './Theme';

describe('providers and render errors', () => {
  it('wraps the component in the provider it needs', () => {
    cy.mount(
      <ThemeProvider theme="dark">
        <ThemeBadge />
      </ThemeProvider>,
    );
    cy.get('[data-cy=theme-badge]').should('have.text', 'Theme: dark');
  });

  it('surfaces a render error as an uncaught exception', () => {
    const seen = cy.spy().as('renderError');
    cy.on('uncaught:exception', err => {
      expect(err.message).to.include("reading 'name'");
      seen();
      return false;
    });
    cy.mount(<Broken />);
    cy.get('@renderError').should('have.been.calledOnce');
  });
});

cd react && npx cypress run --component --browser chrome