Introduction to TDD: What, Why, and How

Welcome to the first lesson of our course on Test Driven Development (TDD) in TypeScript using Jest. TDD is an iterative software development process where tests are written before the actual code. This approach enables programmers to focus on the requirements before diving into implementation, ultimately leading to code that is more reliable and maintainable.

In this lesson, we will introduce you to the essential elements of TDD, including the Red-Green-Refactor cycle, which forms the backbone of this methodology. We'll also introduce the tools we'll be using: TypeScript and `Jest. TypeScript is a popular superset of JavaScript that adds static types, helping you catch potential bugs during development. Jest is a widely-used testing framework for JavaScript that seamlessly integrates with TypeScript, providing a comprehensive solution for defining and running tests. Alternatives like Mocha and Chai exist, but Jest's simplicity and power make it an excellent choice for this course. Let's begin by exploring TDD's core components with an example.

In TDD, the journey begins with writing a test that fails. This "Red" stage allows you to clarify your objective before implementation. Let's start by writing a test for a sum function, which will eventually add two numbers.

Create a file named math.test.ts in the test directory:

import { sum } from '../src/math';

describe('sum function', () => {
  it('should add two numbers correctly', () => {
    expect(sum(2, 3)).toBe(5);
  });
});

This test script:

• Imports the sum function, which we haven't defined yet.
• Uses describe to organize related test cases.
• Contains an it function for a specific test: ensuring sum(2, 3) returns 5.

Run this test even without a sum function. It will fail, reflecting the "Red" phase, indicating the need for implementation.

Output:

FAIL test/math.test.ts
  ● Test suite failed to run

    test/math.test.ts:1:21 - error TS2306: File '/usercode/FILESYSTEM/app/src/math.ts' is not a module.

    1 import { sum } from '../src/math';

This is an expected failure and shows that our test is working properly to identify unimplemented features.

Our next goal is to write just enough code to make the test pass — the "Green" step. In TDD, this means implementing the simplest functionality that satisfies the test requirements. Let's define the sum function in a new file math.ts under the src directory:

export function sum(a: number, b: number): number {
  return 5;
}

This solution might seem odd because it doesn't genuinely add two numbers. However, it exemplifies the TDD focus on passing the test with the minimal implementation. By achieving this, we've fulfilled the current test condition.

Re-running our test will yield the following:

Output:

PASS test/math.test.ts
  sum function
    ✓ should add two numbers correctly (4ms)

Seeing the test pass confirms that our code satisfies the current test scenario. We can later iterate on our implementation as new tests impose stricter functionality requirements.