Introduction to Test-Driven Development (TDD)

Introduction to Test-Driven Development (TDD)

For a long time I wrote tests the way most developers do: after the code. I'd finish a feature, feel reasonably good about it, then write tests to confirm it worked the way I thought it should. The tests always passed. That was my first mistake.

One afternoon I refactored a utility function — cleaned it up, made it "better" — and broke it in a way I didn't notice for two days. The existing tests were testing my implementation, not the behavior. When I changed the implementation, the tests followed. Nobody caught it until QA.

That's when I actually tried TDD. Not because someone told me to, but because I was tired of that particular failure mode.

The TDD Cycle

TDD follows a repeating three-step rhythm. Once you've done it a few times it becomes muscle memory — but the first few times it feels backwards.

A Concrete Example: Multiplication

The textbook example is small, but working through it slowly is worth it.

test('multiplies two numbers', () => {
  expect(multiply(3, 4)).toBe(12);
});

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

Here's what refactoring toward correctness looks like once you add type safety:

11 function multiply(a, b) {
2+  if (typeof a !== 'number' || typeof b !== 'number') {
3+    throw new TypeError('Both arguments must be numbers');
4+  }
25   return a * b;
36 }

Why It Actually Works

I was skeptical about the design benefits until I tried TDD on a piece of code with unclear requirements. Writing the test first forced me to ask: what should this actually do? I had to define the interface before writing any logic. That turned out to be the harder — and more important — question.

Where to Start

Start small. Pick a utility function — a formatter, a validator, something self-contained. Write the test first, watch it fail, then make it pass. One cycle. See how it feels.

The design benefits don't show up in a three-line function. They show up when you're building something with real complexity and your tests are constantly telling you where the API is confusing or where the logic has too many responsibilities. That's TDD doing its job.

You Might Also Like

• Mastering E2E Testing with Playwright in 2026
• Playwright Visual Regression Testing & Pixel Match Guide
• Next.js Hydration Errors: Complete Guide to Error #418, #423 & Text Content Mismatch (2026)
• React in Practice: Production Patterns, Hook Discipline, and Common Pitfalls