Edouard Dorier Portfolio

Introduction

Test-Driven Development (TDD) is a software development methodology where tests are written before the actual functional code. This approach improves code quality, reduces bugs, and makes maintenance easier.

In this article, we’ll explore how to apply TDD with React and Next.js, using tools like Jest, React Testing Library, and Cypress for integration and end-to-end (E2E) testing.

1. What is TDD?

TDD follows a three-step cycle:

1. RED: Write a failing test (because the feature doesn’t exist yet).
2. GREEN: Implement the minimal code to make the test pass.
3. REFACTOR: Optimize the code while keeping the tests green.

This approach encourages modular design and avoids over-engineering.

2. Setting Up Testing in Next.js

Next.js natively supports Jest and React Testing Library. Here’s how to configure them:

Installing Dependencies

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event

Jest Configuration

Create a jest.config.js file:

module.exports = {
  testEnvironment: "jsdom",
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1", // For import aliases
  },
};

Setup File (jest.setup.js)

import "@testing-library/jest-dom/extend-expect";

3. TDD Example with a React Component

Step 1 (RED): Write a Test for a "Button" Component

// tests/Button.test.js
import { render, screen } from "@testing-library/react";
import Button from "../components/Button";

test("displays a button with the given text", () => {
  render(<Button label="Click me" />);
  expect(screen.getByText("Click me")).toBeInTheDocument();
});

👉 The test fails because the Button component doesn’t exist yet.

Step 2 (GREEN): Implement the Component

// components/Button.js
export default function Button({ label }) {
  return <button>{label}</button>;
}

✅ The test now passes!

Step 3 (REFACTOR): Improve the Component

For example, add additional props (onClick, className).

4. TDD with Next.js (API Routes and SSR)

Next.js also allows testing:

• Static/SSR pages (with getServerSideProps).
• API Routes (backend endpoints).

Example: Testing an API Route

// tests/api/hello.test.js
import { createMocks } from "node-mocks-http";
import handler from "../../pages/api/hello";

test("returns 'Hello World'", async () => {
  const { req, res } = createMocks({ method: "GET" });
  await handler(req, res);
  expect(res._getJSONData()).toEqual({ message: "Hello World" });
});

API Implementation

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: "Hello World" });
}

5. Additional Tools

• Cypress: For E2E testing (simulating user interactions).
• MSW (Mock Service Worker): For mocking APIs.
• Storybook: For testing components in isolation.

Conclusion

Using TDD with React and Next.js helps:
✅ Prevent regressions with strong test coverage.
✅ Simplify refactoring by relying on robust tests.
✅ Improve design by writing modular code.

With Jest, React Testing Library, and Cypress, you have all the tools needed to adopt TDD effectively.

🚀 Ready to test your code before writing it?

📌 Useful Resources:

• Jest Documentation
• React Testing Library
• Next.js Testing