Component Testing

What it is

A component test mounts a single UI component (button, form, card) or a small cluster of them and asserts on what the user sees and does — text, roles, interactions — without booting the whole application, real network or a real browser.

It sits between unit and integration: real rendering, but a scoped surface. In the testing trophy it is part of the wide middle layer.

When to use it / when to avoid it

Use it for

Interactive components: forms, dropdowns, modals, tables
Conditional rendering, empty/loading/error states
Accessibility basics: roles, labels, keyboard interaction

Avoid it when

The component has no behaviour (pure presentational markup) → a visual regression or snapshot is enough
You need routing, data fetching and several pages → that is end-to-end

Frameworks & tools

Tool	Ecosystem	Notes
React Testing Library	React	Query by role/text, user-centric
Testing Library (Vue/Svelte/Solid/Angular)	Multi	Same guiding principles
Storybook	Multi	Develop and catalog components in isolation
Storybook Test Runner	Multi	Run stories as tests
Chromatic / Percy	Multi	Visual + interaction review of stories
Vitest browser mode	Multi	Real browser, in-process
Cypress Component Testing	Multi	Component tests in a real browser
Playwright CT	React/Vue/Svelte	Experimental component testing
Vue Test Utils, Angular TestBed	per-framework	Official mounting helpers

Quick setup

1
npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom

1
npm install -D vitest @vue/test-utils @testing-library/vue jsdom

1
npm install -D vitest @testing-library/svelte jsdom

1
npx storybook@latest init
2
npm install -D @storybook/test-runner

1
npm install -D cypress
2
npx cypress open --component

Example

1
import { render, screen } from '@testing-library/react';
2
import userEvent from '@testing-library/user-event';
3
import { Counter } from './Counter';
4

5
it('increments when the button is clicked', async () => {
6
  render(<Counter />);
7
  await userEvent.click(screen.getByRole('button', { name: /increment/i }));
8
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
9
});

1
import { mount } from '@vue/test-utils';
2
import Counter from './Counter.vue';
3

4
it('increments on click', async () => {
5
  const wrapper = mount(Counter);
6
  await wrapper.get('button').trigger('click');
7
  expect(wrapper.text()).toContain('Count: 1');
8
});

1
export const Increments: Story = {
2
  play: async ({ canvasElement }) => {
3
    const canvas = within(canvasElement);
4
    await userEvent.click(canvas.getByRole('button', { name: /increment/i }));
5
    await expect(canvas.getByText('Count: 1')).toBeInTheDocument();
6
  },
7
};

Anti-patterns & best practices

Query like a user. Prefer getByRole, getByLabelText over test IDs and CSS classes — the queries themselves enforce accessibility.
Assert what the user sees, not component internals or state variables.
Drive interaction with userEvent, not by dispatching raw events.
Cover the states: empty, loading, error, disabled.
Do not snapshot the whole tree. Large snapshots break on every styling change and nobody reads them.