Stack

Component test

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('login form submits', async () => {
  const onSubmit = vi.fn();
  render(<LoginForm onSubmit={onSubmit} />);

  await userEvent.type(screen.getByLabelText(/email/i), 'a@b.c');
  await userEvent.type(screen.getByLabelText(/password/i), 'pass');
  await userEvent.click(screen.getByRole('button', { name: /sign in/i }));

  expect(onSubmit).toHaveBeenCalledWith({ email: 'a@b.c', password: 'pass' });
});

Queries by role and accessible name — same as a screen reader.

Query priority

1. getByRole (accessible name, role).
2. getByLabelText (form fields).
3. getByPlaceholderText.
4. getByText.
5. getByTestId (last resort).

If you can't query by role, your component probably has an a11y problem.

API flow with MSW

import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  http.get('/api/user', () => HttpResponse.json({ id: 1, name: 'Sam' })),
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('shows user', async () => {
  render(<Profile />);
  expect(await screen.findByText('Sam')).toBeInTheDocument();
});

MSW intercepts at the network layer — no fetch mocks, no axios mocks. Same handlers work in Storybook / Playwright.

What NOT to test

• Component internal state (expect(component.state.x)).
• Specific class names / styles (unless that's the public API).
• Hook order / implementation details.
• Pure unrelated dependencies.

Async patterns

• findBy* for async appearances (waits + retries).
• waitFor for arbitrary async assertions.
• waitForElementToBeRemoved for disappearance.

Mocking modules

vi.mock('@/lib/analytics', () => ({ track: vi.fn() }));

Mock only at boundary modules (analytics, logger). Don't mock internal modules — refactor instead.

Coverage philosophy

• High coverage on critical paths (auth, checkout, save).
• Lower coverage on UI permutations (visual regression handles that).
• E2E (Playwright) for happy-path flows through real-ish stack.

Common mistakes

• Testing expect(wrapper.find('Button').props().onClick).toBeDefined() (Enzyme leftover style).
• Mocking React Query / Redux internals.
• Snapshot tests with huge JSON — diffs become noise.
• Testing implementation details that change with refactors.

Tooling

• @testing-library/jest-dom for matchers (toBeInTheDocument, toHaveAccessibleName).
• --changed for fast CI on PR diff.
• --watch locally for fast feedback.

Interview framing

"Vitest (or Jest) + Testing Library + MSW + Playwright. Query components by role and accessible name — same as a screen reader; reaching for getByTestId is a smell. User-event for realistic interactions. MSW for API flows — mock at the network layer so handlers are reusable across Storybook and Playwright. Don't test internal state or implementation; test what the user sees. Coverage focused on critical paths; visual regression and E2E pick up where unit tests stop. Refactor instead of mocking internal modules."