What are the different types of tests in frontend development? Explain the difference between unit tests, integration tests, and end-to-end tests.

Question

Accepted Answer

In frontend development, there are three main levels of tests, often represented as a pyramid.

Unit tests verify the behavior of an isolated unit of code, usually a function or component. They are fast, numerous, and form the base of the pyramid.

function formatPrice(price) {
  return price.toFixed(2) + ' dollars';
}

test('formats price with two decimals', () => {
  expect(formatPrice(19.5)).toBe('19.50 dollars');
});

For React components, you test a component alone, without its real dependencies.

Integration tests verify that multiple units work correctly together. They are fewer but cover more realistic scenarios.

test('form submits data correctly', () => {
  render(<ContactForm onSubmit={mockSubmit} />);

  fireEvent.change(screen.getByLabelText('Email'), {
    target: { value: 'test@example.com' }
  });
  fireEvent.click(screen.getByText('Send'));

  expect(mockSubmit).toHaveBeenCalledWith({
    email: 'test@example.com'
  });
});

Here we test the interaction between the email field, the button, and the submit function.

End-to-end tests, or E2E tests, simulate a real user navigating through the application. They use a real browser and test the complete application, including the backend.

describe('Purchase process', () => {
  it('allows ordering a product', () => {
    cy.visit('/');
    cy.get('[data-testid="product-1"]').click();
    cy.get('[data-testid="add-to-cart"]').click();
    cy.get('[data-testid="checkout"]').click();
    cy.url().should('include', '/checkout');
  });
});

The test pyramid works as follows. At the bottom, many unit tests that are fast, cheap, and easy to maintain. In the middle, integration tests that balance coverage and speed. At the top, few E2E tests that are slow and expensive but very realistic.

Common tools by type include Jest and React Testing Library for unit and integration tests. For E2E tests, Cypress, Playwright, and Selenium are the main choices.