Testing Fundamentals

Why Testing Matters

Software testing is the process of verifying that your application works as expected and continues to work as you make changes. It's not just about finding bugs—it's about building confidence, enabling rapid development, and serving as living documentation for your codebase.

Benefits of Automated Testing

Types of Testing

Your First Unit Test

Let's write a simple unit test using Jest:

// sum.js - Function to test
export function sum(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  if (b === 0) {
    throw new Error("Cannot divide by zero");
  }
  return a / b;
}

// sum.test.js - Test file
import { sum, subtract, multiply, divide } from './sum';

describe('Math operations', () => {
  // Test for sum function
  test('adds 1 + 2 to equal 3', () => {
    expect(sum(1, 2)).toBe(3);
  });

  test('adds negative numbers correctly', () => {
    expect(sum(-1, -2)).toBe(-3);
  });

  // Test for subtract function
  test('subtracts 5 - 3 to equal 2', () => {
    expect(subtract(5, 3)).toBe(2);
  });

  // Test for multiply function
  test('multiplies 3 * 4 to equal 12', () => {
    expect(multiply(3, 4)).toBe(12);
  });

  test('multiplying by zero returns zero', () => {
    expect(multiply(5, 0)).toBe(0);
  });

  // Test for divide function
  test('divides 10 / 2 to equal 5', () => {
    expect(divide(10, 2)).toBe(5);
  });

  test('throws error when dividing by zero', () => {
    expect(() => divide(10, 0)).toThrow('Cannot divide by zero');
  });
});

// Run tests with: npm test

Testing React Components

// Button.jsx - Component to test
export function Button({ onClick, disabled, children }) {
  return (
    
      {children}
    
  );
}

// Button.test.jsx - Component test
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from './Button';

describe('Button component', () => {
  test('renders with correct text', () => {
    render(Click me);
    
    const button = screen.getByText('Click me');
    expect(button).toBeInTheDocument();
  });

  test('calls onClick when clicked', () => {
    const handleClick = jest.fn();
    render(Click me);
    
    const button = screen.getByText('Click me');
    fireEvent.click(button);
    
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  test('does not call onClick when disabled', () => {
    const handleClick = jest.fn();
    render(
      
        Click me
      
    );
    
    const button = screen.getByText('Click me');
    fireEvent.click(button);
    
    expect(handleClick).not.toHaveBeenCalled();
  });

  test('has disabled attribute when disabled prop is true', () => {
    render(Click me);
    
    const button = screen.getByText('Click me');
    expect(button).toBeDisabled();
  });
});

Test-Driven Development (TDD)

Common Testing Patterns

test('user can add item to cart', () => {
  // Arrange: Set up test data
  const cart = new ShoppingCart();
  const item = { id: 1, name: 'Book', price: 20 };
  
  // Act: Perform the action
  cart.addItem(item);
  
  // Assert: Verify the result
  expect(cart.items).toHaveLength(1);
  expect(cart.total).toBe(20);
});

describe('Database tests', () => {
  let db;
  
  // Run before each test
  beforeEach(async () => {
    db = await connectDatabase();
    await db.clear();
  });
  
  // Run after each test
  afterEach(async () => {
    await db.disconnect();
  });
  
  test('can save user', async () => {
    const user = { name: 'Alice', email: 'alice@example.com' };
    await db.users.save(user);
    
    const savedUser = await db.users.findOne({ email: 'alice@example.com' });
    expect(savedUser.name).toBe('Alice');
  });
});

// Test multiple inputs efficiently
test.each([
  [1, 1, 2],
  [1, 2, 3],
  [2, 2, 4],
  [-1, 1, 0],
  [0, 0, 0],
])('sum(%i, %i) returns %i', (a, b, expected) => {
  expect(sum(a, b)).toBe(expected);
});