🧪 Test-Driven Development: TDD with TypeScript

🎯 Introduction

Welcome to the exciting world of Test-Driven Development with TypeScript! 🎉 In this guide, we’ll explore how TDD transforms your development process from a chaotic scramble into a confident, systematic approach.

You’ll discover how TDD can revolutionize your TypeScript development experience. Whether you’re building web applications 🌐, server-side APIs 🖥️, or libraries 📚, understanding TDD is essential for writing robust, maintainable code with confidence.

By the end of this tutorial, you’ll feel confident implementing TDD in your own TypeScript projects! Let’s dive in! 🏊‍♂️

📚 Understanding Test-Driven Development

🤔 What is Test-Driven Development?

TDD is like building a house with a blueprint first 🏗️. Think of it as writing the “what should happen” before writing the “how it happens” - you define your expectations, then make them come true!

In TypeScript terms, TDD means writing tests that fail, then writing just enough code to make them pass, then improving the code while keeping tests green 🟢. This means you can:

✨ Catch bugs before they happen
🚀 Refactor fearlessly with confidence
🛡️ Build exactly what’s needed, nothing more

💡 Why Use TDD?

Here’s why developers love TDD:

Confidence 🔒: Your tests act as a safety net
Better Design 💻: Forces you to think about interfaces first
Living Documentation 📖: Tests show how code should behave
Regression Prevention 🔧: Changes won’t break existing functionality

Real-world example: Imagine building a shopping cart 🛒. With TDD, you’d first write tests for “adding items should increase the total”, then implement the functionality to make those tests pass!

🔧 Basic TDD Cycle: Red-Green-Refactor

📝 The Sacred Cycle

TDD follows a simple but powerful cycle:

// 🔴 RED: Write a failing test
describe("Calculator", () => {
  it("should add two numbers correctly", () => {
    const calc = new Calculator();
    expect(calc.add(2, 3)).toBe(5); // 💥 This will fail - Calculator doesn't exist!
  });
});

// 🟢 GREEN: Write minimal code to pass
class Calculator {
  add(a: number, b: number): number {
    return a + b; // ✅ Just enough to make it pass!
  }
}

// 🔵 REFACTOR: Improve the code while keeping tests green
class Calculator {
  // 🎨 Add type safety and validation
  add(a: number, b: number): number {
    if (typeof a !== 'number' || typeof b !== 'number') {
      throw new Error('🚫 Only numbers allowed!');
    }
    return a + b;
  }
}

💡 Explanation: Notice how we start with the test, then build the minimum code to pass it, then improve! This ensures we only write what we need.

🎯 Setting Up Your TypeScript Testing Environment

Let’s set up a modern testing environment:

# 📦 Install Jest and TypeScript support
npm install --save-dev jest @types/jest ts-jest typescript

# 🔧 Initialize Jest configuration
npx ts-jest config:init

// 📝 jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  roots: ['<rootDir>/src'],
  testMatch: ['**/__tests__/**/*.ts', '**/*.test.ts'],
  collectCoverageFrom: [
    'src/**/*.ts',
    '!src/**/*.d.ts',
  ],
};

💡 Practical Examples

🛒 Example 1: TDD Shopping Cart

Let’s build a shopping cart using TDD:

// 🔴 RED: Start with the test
describe("ShoppingCart", () => {
  it("should start empty", () => {
    const cart = new ShoppingCart();
    expect(cart.getItemCount()).toBe(0);
    expect(cart.getTotal()).toBe(0);
  });

  it("should add items correctly", () => {
    const cart = new ShoppingCart();
    const item = { id: "1", name: "TypeScript Book 📘", price: 29.99 };
    
    cart.addItem(item);
    
    expect(cart.getItemCount()).toBe(1);
    expect(cart.getTotal()).toBe(29.99);
  });
});

// 🟢 GREEN: Implement to make tests pass
interface CartItem {
  id: string;
  name: string;
  price: number;
}

class ShoppingCart {
  private items: CartItem[] = [];

  addItem(item: CartItem): void {
    this.items.push(item);
  }

  getItemCount(): number {
    return this.items.length;
  }

  getTotal(): number {
    return this.items.reduce((sum, item) => sum + item.price, 0);
  }
}

// 🔵 REFACTOR: Add more functionality through TDD
describe("ShoppingCart advanced features", () => {
  it("should remove items correctly", () => {
    const cart = new ShoppingCart();
    const item = { id: "1", name: "Coffee ☕", price: 4.99 };
    
    cart.addItem(item);
    cart.removeItem(item.id);
    
    expect(cart.getItemCount()).toBe(0);
    expect(cart.getTotal()).toBe(0);
  });

  it("should handle quantities", () => {
    const cart = new ShoppingCart();
    const item = { id: "1", name: "Cookies 🍪", price: 2.99 };
    
    cart.addItem(item, 3); // 🎯 Add quantity parameter
    
    expect(cart.getItemCount()).toBe(3);
    expect(cart.getTotal()).toBe(8.97);
  });
});

🎯 Try it yourself: Add a discount system that applies percentage discounts!

🎮 Example 2: TDD Game Score System

Let’s create a game scoring system:

// 🔴 RED: Define what we want first
describe("GameScore", () => {
  it("should track player scores", () => {
    const game = new GameScore();
    
    game.addPlayer("Alice 👩");
    game.addPoints("Alice 👩", 100);
    
    expect(game.getScore("Alice 👩")).toBe(100);
  });

  it("should determine the winner", () => {
    const game = new GameScore();
    
    game.addPlayer("Alice 👩");
    game.addPlayer("Bob 👨");
    game.addPoints("Alice 👩", 100);
    game.addPoints("Bob 👨", 150);
    
    expect(game.getWinner()).toBe("Bob 👨");
  });

  it("should handle achievements", () => {
    const game = new GameScore();
    
    game.addPlayer("Charlie 🧑");
    game.addPoints("Charlie 🧑", 1000); // 🏆 Big achievement!
    
    expect(game.getAchievements("Charlie 🧑")).toContain("🏆 High Scorer");
  });
});

// 🟢 GREEN: Implement the functionality
interface Player {
  name: string;
  score: number;
  achievements: string[];
}

class GameScore {
  private players: Map<string, Player> = new Map();

  addPlayer(name: string): void {
    this.players.set(name, {
      name,
      score: 0,
      achievements: ["🌟 New Player"]
    });
  }

  addPoints(name: string, points: number): void {
    const player = this.players.get(name);
    if (!player) throw new Error(`🚫 Player ${name} not found!`);
    
    player.score += points;
    
    // 🎊 Check for achievements
    if (player.score >= 1000 && !player.achievements.includes("🏆 High Scorer")) {
      player.achievements.push("🏆 High Scorer");
    }
  }

  getScore(name: string): number {
    const player = this.players.get(name);
    return player ? player.score : 0;
  }

  getWinner(): string | null {
    let winner: Player | null = null;
    
    for (const player of this.players.values()) {
      if (!winner || player.score > winner.score) {
        winner = player;
      }
    }
    
    return winner ? winner.name : null;
  }

  getAchievements(name: string): string[] {
    const player = this.players.get(name);
    return player ? player.achievements : [];
  }
}

🚀 Advanced TDD Concepts

🧙‍♂️ Mocking and Test Doubles

When testing code that depends on external services, use mocks:

// 🎯 Interface for testing
interface UserRepository {
  save(user: User): Promise<void>;
  findById(id: string): Promise<User | null>;
}

// 🎮 Service to test
class UserService {
  constructor(private repo: UserRepository) {}

  async createUser(userData: { name: string; email: string }): Promise<User> {
    const user = new User(userData.name, userData.email);
    await this.repo.save(user);
    return user;
  }
}

// 🧪 Test with mock
describe("UserService", () => {
  it("should create and save user", async () => {
    // 🎭 Create a mock repository
    const mockRepo: UserRepository = {
      save: jest.fn(),
      findById: jest.fn()
    };

    const service = new UserService(mockRepo);
    const userData = { name: "Alice 👩", email: "[email protected]" };

    const user = await service.createUser(userData);

    expect(user.name).toBe("Alice 👩");
    expect(mockRepo.save).toHaveBeenCalledWith(user);
  });
});

🏗️ Testing Async Operations

Handle promises and async code properly:

// 🚀 Async function to test
class ApiClient {
  async fetchUserData(id: string): Promise<UserData> {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`🚫 User ${id} not found`);
    }
    return response.json();
  }
}

// 🧪 Test async operations
describe("ApiClient", () => {
  it("should fetch user data successfully", async () => {
    // 🎭 Mock fetch
    global.fetch = jest.fn().mockResolvedValue({
      ok: true,
      json: async () => ({ name: "Alice 👩", id: "123" })
    });

    const client = new ApiClient();
    const userData = await client.fetchUserData("123");

    expect(userData.name).toBe("Alice 👩");
    expect(fetch).toHaveBeenCalledWith("/api/users/123");
  });

  it("should handle errors properly", async () => {
    // 🎭 Mock failed response
    global.fetch = jest.fn().mockResolvedValue({
      ok: false
    });

    const client = new ApiClient();

    await expect(client.fetchUserData("999"))
      .rejects
      .toThrow("🚫 User 999 not found");
  });
});

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Testing Implementation Instead of Behavior

// ❌ Wrong way - testing implementation details!
it("should call the internal method", () => {
  const calculator = new Calculator();
  const spy = jest.spyOn(calculator, 'internalCalculation');
  
  calculator.add(2, 3);
  
  expect(spy).toHaveBeenCalled(); // 💥 Brittle test!
});

// ✅ Correct way - test behavior!
it("should return correct sum", () => {
  const calculator = new Calculator();
  
  const result = calculator.add(2, 3);
  
  expect(result).toBe(5); // ✅ Tests what matters!
});

🤯 Pitfall 2: Overly Complex Tests

// ❌ Complex test that's hard to understand
it("should handle complex scenario", () => {
  const cart = new ShoppingCart();
  const items = [
    { id: "1", name: "Item 1", price: 10 },
    { id: "2", name: "Item 2", price: 20 },
    { id: "3", name: "Item 3", price: 30 }
  ];
  items.forEach(item => cart.addItem(item));
  cart.removeItem("2");
  cart.applyDiscount(0.1);
  expect(cart.getTotal()).toBe(36); // 🤔 How did we get 36?
});

// ✅ Simple, focused tests
describe("ShoppingCart discounts", () => {
  it("should apply 10% discount correctly", () => {
    const cart = new ShoppingCart();
    const item = { id: "1", name: "Book 📘", price: 100 };
    
    cart.addItem(item);
    cart.applyDiscount(0.1);
    
    expect(cart.getTotal()).toBe(90); // ✅ Clear expectation!
  });
});

🛠️ Best Practices

🎯 One Assertion Per Test: Keep tests focused and clear
📝 Descriptive Test Names: “should calculate total with discount applied”
🛡️ Arrange-Act-Assert: Structure your tests consistently
🎨 Use TypeScript Types: Make your tests type-safe too
✨ Keep Tests Simple: If a test is complex, break it down

🧪 Hands-On Exercise

🎯 Challenge: Build a TDD Task Manager

Create a task management system using TDD:

📋 Requirements:

✅ Create, complete, and delete tasks
🏷️ Add categories and priorities
📅 Set due dates with validation
📊 Generate completion statistics
🎨 Each task needs an emoji!

🚀 Bonus Points:

Add task assignment to users
Implement filtering and sorting
Create notification system for overdue tasks

💡 Solution

🔍 Click to see solution

// 🔴 RED: Start with comprehensive tests
describe("TaskManager", () => {
  describe("Task Creation", () => {
    it("should create a task with required fields", () => {
      const manager = new TaskManager();
      const taskData = {
        title: "Learn TDD 🧪",
        category: "learning" as const,
        priority: "high" as const
      };

      const task = manager.createTask(taskData);

      expect(task.title).toBe("Learn TDD 🧪");
      expect(task.category).toBe("learning");
      expect(task.priority).toBe("high");
      expect(task.completed).toBe(false);
      expect(task.id).toBeDefined();
    });

    it("should validate due dates", () => {
      const manager = new TaskManager();
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);

      expect(() => {
        manager.createTask({
          title: "Overdue task 😅",
          category: "work",
          priority: "low",
          dueDate: yesterday
        });
      }).toThrow("🚫 Due date cannot be in the past");
    });
  });

  describe("Task Management", () => {
    it("should complete tasks", () => {
      const manager = new TaskManager();
      const task = manager.createTask({
        title: "Complete this task ✅",
        category: "work",
        priority: "medium"
      });

      manager.completeTask(task.id);

      expect(manager.getTask(task.id)?.completed).toBe(true);
    });

    it("should filter tasks by category", () => {
      const manager = new TaskManager();
      manager.createTask({ title: "Work task 💼", category: "work", priority: "high" });
      manager.createTask({ title: "Personal task 🏠", category: "personal", priority: "low" });

      const workTasks = manager.getTasksByCategory("work");

      expect(workTasks).toHaveLength(1);
      expect(workTasks[0].title).toBe("Work task 💼");
    });
  });

  describe("Statistics", () => {
    it("should calculate completion percentage", () => {
      const manager = new TaskManager();
      const task1 = manager.createTask({ title: "Task 1 📝", category: "work", priority: "high" });
      const task2 = manager.createTask({ title: "Task 2 📝", category: "work", priority: "high" });

      manager.completeTask(task1.id);

      expect(manager.getCompletionPercentage()).toBe(50);
    });

    it("should generate category statistics", () => {
      const manager = new TaskManager();
      manager.createTask({ title: "Work 1 💼", category: "work", priority: "high" });
      manager.createTask({ title: "Work 2 💼", category: "work", priority: "low" });
      manager.createTask({ title: "Personal 🏠", category: "personal", priority: "medium" });

      const stats = manager.getCategoryStats();

      expect(stats.work).toBe(2);
      expect(stats.personal).toBe(1);
    });
  });
});

// 🟢 GREEN: Implement the functionality
type Priority = "low" | "medium" | "high";
type Category = "work" | "personal" | "learning" | "health";

interface Task {
  id: string;
  title: string;
  category: Category;
  priority: Priority;
  completed: boolean;
  createdAt: Date;
  dueDate?: Date;
  completedAt?: Date;
}

interface CreateTaskData {
  title: string;
  category: Category;
  priority: Priority;
  dueDate?: Date;
}

class TaskManager {
  private tasks: Map<string, Task> = new Map();
  private nextId = 1;

  createTask(data: CreateTaskData): Task {
    // 🛡️ Validate due date
    if (data.dueDate && data.dueDate < new Date()) {
      throw new Error("🚫 Due date cannot be in the past");
    }

    const task: Task = {
      id: this.nextId.toString(),
      title: data.title,
      category: data.category,
      priority: data.priority,
      completed: false,
      createdAt: new Date(),
      dueDate: data.dueDate
    };

    this.tasks.set(task.id, task);
    this.nextId++;

    return task;
  }

  getTask(id: string): Task | undefined {
    return this.tasks.get(id);
  }

  completeTask(id: string): void {
    const task = this.tasks.get(id);
    if (!task) throw new Error(`🚫 Task ${id} not found`);

    task.completed = true;
    task.completedAt = new Date();
  }

  deleteTask(id: string): void {
    if (!this.tasks.has(id)) {
      throw new Error(`🚫 Task ${id} not found`);
    }
    this.tasks.delete(id);
  }

  getTasksByCategory(category: Category): Task[] {
    return Array.from(this.tasks.values())
      .filter(task => task.category === category);
  }

  getCompletionPercentage(): number {
    const totalTasks = this.tasks.size;
    if (totalTasks === 0) return 100;

    const completedTasks = Array.from(this.tasks.values())
      .filter(task => task.completed).length;

    return Math.round((completedTasks / totalTasks) * 100);
  }

  getCategoryStats(): Record<Category, number> {
    const stats: Record<Category, number> = {
      work: 0,
      personal: 0,
      learning: 0,
      health: 0
    };

    for (const task of this.tasks.values()) {
      stats[task.category]++;
    }

    return stats;
  }

  // 🔵 REFACTOR: Add priority sorting
  getTasksByPriority(): Task[] {
    const priorityOrder = { high: 3, medium: 2, low: 1 };
    
    return Array.from(this.tasks.values())
      .sort((a, b) => priorityOrder[b.priority] - priorityOrder[a.priority]);
  }

  // 🎯 Get overdue tasks
  getOverdueTasks(): Task[] {
    const now = new Date();
    return Array.from(this.tasks.values())
      .filter(task => 
        !task.completed && 
        task.dueDate && 
        task.dueDate < now
      );
  }
}

// 🎮 Usage example
const taskManager = new TaskManager();

// 📝 Create some tasks
const learningTask = taskManager.createTask({
  title: "Master TDD 🧪",
  category: "learning",
  priority: "high",
  dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // 1 week from now
});

const workTask = taskManager.createTask({
  title: "Deploy new feature 🚀",
  category: "work",
  priority: "high"
});

// ✅ Complete a task
taskManager.completeTask(learningTask.id);

// 📊 Check progress
console.log(`📈 Completion: ${taskManager.getCompletionPercentage()}%`);
console.log("📋 High priority tasks:", taskManager.getTasksByPriority().slice(0, 3));

🎓 Key Takeaways

You’ve learned so much about TDD! Here’s what you can now do:

✅ Apply the Red-Green-Refactor cycle with confidence 💪
✅ Write focused, maintainable tests that guide your development 🛡️
✅ Mock dependencies and test async code like a pro 🎯
✅ Avoid common TDD pitfalls and write better tests 🐛
✅ Build type-safe, well-tested TypeScript applications 🚀

Remember: TDD isn’t just about testing - it’s about designing better software! It helps you think before you code. 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered Test-Driven Development with TypeScript!

Here’s what to do next:

💻 Practice TDD with the exercise above
🏗️ Start your next project using TDD from day one
📚 Explore advanced testing patterns like BDD and property-based testing
🌟 Share your TDD journey with the community!

Remember: Every expert was once a beginner who refused to give up. Keep writing tests, keep refactoring, and most importantly, have fun building reliable software! 🚀

Happy testing! 🎉🧪✨

Prerequisites

What you'll learn