What is Test Driven Development (TDD)?
Test Driven Development (TDD) is a software development methodology that changes the traditional order of component creation. Instead of starting with the development of software components, TDD begins with writing tests. This strategy ensures that when it comes time to refactor, there are tests in place to ensure that modifications do not introduce errors.
How does the TDD cycle work?
The Test Driven Development cycle goes through three clear stages:
- Red: In this step, the initial tests are created. Since the component does not yet exist, these tests must fail.
- Green: The component is developed to pass the previously configured tests.
- Refactor: This phase allows the code to be improved and optimized with the assurance that the tests will protect the system against unexpected errors.
It is important to note that this methodology shines in well-defined software, where the use cases are clear. It is not as effective in software in experimental or constantly changing phases.
How to implement TDD?
Creating initial tests
-
Create a folder for the component, for example, counter.
-
Inside, start a test file, counter.test.tsx.
-
Set up the key vitest imports, such as describe, it and expect.
-
Define the main test cases:
- The counter should initially display the value "0".
- When a button is clicked, the counter should increment to "1".
Here the rendering of the component is simulated (although it does not exist yet) and the expected behavior is ensured by testing library/react.
import { describe, it, expect } from "vitest";import { render, screen, fireEvent } from "@testing-library/react";import { Counter } from './Counter';
describe("Counter", () => { it("should show initial value", () => { render(<Counter />); const counter = screen.getByText("Counter: 0"); expect(counter).toBeInTheDocument(); });
it("should increment counter", async () => { render(<Counter />); const button = screen.getByText("Increment"); fireEvent.click(button); const counter = screen.getByText("Counter: 1"); expect(counter).toBeInTheDocument(); });});
Component development
- Creates or modifies the
counter.tsx component.
- Defines its initial state and expected behavior:
import { useState } from 'react';
export const Counter = () => { const [counter, setCounter] = useState(0);
const handleIncrement = () => setCounter(counter + 1);
return ( <div>
<p>Counter: {counter}</p>
<buttononClick={handleIncrement}>Increment</button>
</div> );};
Refactoring with confidence
Once the tests pass successfully, you can refactor the code with confidence that the tests will protect your system against introducing bugs.
Why implement TDD?
- Code Quality: Provides a strong testing foundation that allows changes without fear of breaking existing functionality.
- Fast Feedback: Reports immediately if a change introduces a bug.
- Efficient Design: Encourages clear and concise test writing, resulting in cleaner, more understandable code.
Proposed Challenge
Create a new component using TDD. Some ideas are:
- An "todo list" that displays items when they are added.
- A timer that switches to the "paused" state when stopped.
Constant practice of TDD not only strengthens your skills, but prepares you to create robust and secure systems. Come share your achievements!
Want to see more contributions, questions and answers from the community?