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:

TypeScript
Copy to clipboard
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:

Copy to clipboard
1FAIL test/math.test.ts
2  ● Test 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.

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
Copy to clipboard
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:

Copy to clipboard
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.

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
Copy to clipboard
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.

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.