Lesson 1
Introduction to TDD: What, Why, and How
Introduction to TDD

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.

Writing the First Test (Red)

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:

TypeScript
1import { sum } from '../src/math'; 2 3describe('sum function', () => { 4 it('should add two numbers correctly', () => { 5 expect(sum(2, 3)).toBe(5); 6 }); 7});

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:

1FAIL test/math.test.ts 2Test suite failed to run 3 4 test/math.test.ts:1:21 - error TS2306: File '/usercode/FILESYSTEM/app/src/math.ts' is not a module. 5 6 1 import { sum } from '../src/math';

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

Making the Test Pass (Green)

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:

TypeScript
1export function sum(a: number, b: number): number { 2 return 5; 3}

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:

1PASS test/math.test.ts 2 sum function 3 ✓ 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.

Refactoring and Code Improvement (Refactor)

The last step, "Refactor," involves refining the code while ensuring existing behavior remains unchanged. In this instance, our sum function is quite efficient, but we can improve our test readability by separating the execution from the assertion. This involves extracting the output of the sum function into a variable:

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

This small refactoring illustrates how minor adjustments can enhance clarity, as it isolates the act (execution) from the assert (verification). When dealing with more complex functions, refactoring might involve breaking down a function, renaming variables for clarity, or improving test readability. Our Red-Green-Refactor cycle for this example is now complete.

Review and Next Steps

In this lesson, we've explored the basic tenets of TDD using the Red-Green-Refactor workflow with TypeScript and Jest. Let's recap:

  • Red: Begin by writing a test that fails.
  • Green: Develop minimal code sufficient to pass the test.
  • Refactor: Enhance your code and maintain passing tests.

As you advance, practicing TDD principles in the practice exercises will strengthen your understanding and ability to write robust, maintainable code. Remember to integrate these concepts into your daily coding practices to enhance code quality and reliability.

With this foundation, you're ready to delve into more complex scenarios we will explore in future lessons. Keep honing your skills to become an adept practitioner of TDD.

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.