Introducción a Jest en Next.js con TypeScript: Testing Efectivo para tus Aplicaciones

En el desarrollo moderno de aplicaciones web, garantizar la calidad del código es fundamental. Las pruebas automatizadas no solo ayudan a identificar errores antes de que lleguen a producción, sino que también permiten que el equipo de desarrollo se sienta más seguro al realizar cambios en el código. En este tutorial, exploraremos cómo integrar Jest, un popular framework de pruebas, en una aplicación Next.js escrita en TypeScript.

Next.js es un poderoso framework de React que facilita la creación de aplicaciones web optimizadas, mientras que TypeScript añade tipado estático, lo que mejora la mantenibilidad y escalabilidad del código. Combinar estos dos potentes herramientas con Jest nos permitirá escribir pruebas robustas y efectivas.

A lo largo de este tutorial, aprenderás a configurar Jest en tu proyecto Next.js, a escribir pruebas unitarias y de integración, y a utilizar herramientas útiles como React Testing Library para probar componentes de React. Prepárate para llevar la calidad de tu código al siguiente nivel mientras exploramos las mejores prácticas y técnicas para asegurar que tu aplicación funcione de manera impecable. ¡Comencemos!

Intalación de paquetes de npm principales

npm i -D @testing-library/jest-dom @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-node ts-jest 

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest",
    "test:watch": "jest --watchAll"
  },

crea un archivo jest.config.ts:

import type { Config } from 'jest'
import nextJest from 'next/jest.js'
 
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})
 
// Add any custom config to be passed to Jest
const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jsdom',
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)

Luego modificaremos el config de la siguiente manera:

const config: Config = {
  coverageProvider: 'v8',
  testEnvironment: 'jest-environment-jsdom',
  // Add more setup options before each test is run
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  preset: 'ts-jest',
}

Luego crearemos un setup de esta forma:

import '@testing-library/jest-dom'

Tu Primer Test

import { render, screen } from "@testing-library/react";
import HomePage from "@/app/page";

it("renders welcome message", () => {
  render(<HomePage />);
  expect(screen.getByText("Welcome to Next.js!")).toBeInTheDocument();
});

Luego despues de unas correcciones:

import { render, screen } from "@testing-library/react";
import HomePage from "@/app/page";

describe("Home Page", () => {
  beforeEach(() => {
    render(<HomePage />);
  });

  it("should render Templates text in home", () => {
    expect(screen.getByText("Templates")).toBeInTheDocument();
  });

  it("should render 'Get Started by ", () => {
    expect(screen.getByText(/Get Started by/i)).toBeInTheDocument();
  });

  it('should render just "Deploy" word in home page', () => {
    expect(
      screen.getByRole("heading", {
        name: /deploy/i,
      })
    ).toBeInTheDocument();
  });
});

npm test

Configurando Eslint para Jest

npm i -D eslint-plugin-jest-dom eslint-plugin-testing-library

en .eslintr.json:

{
  "extends": [
    "next/core-web-vitals",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended"
  ]
}

Luego en test/app/Home.spec.tsx

import { render, screen } from "@testing-library/react";
import HomePage from "@/app/page";

describe("Home Page", () => {
  it("should render Templates text in home", () => {
    render(<HomePage />);
    expect(screen.getByText("Templates")).toBeInTheDocument();
  });

  it("should render 'Get Started by ", () => {
    render(<HomePage />);
    expect(screen.getByText(/Get Started by/i)).toBeInTheDocument();
  });

  it('should render just "Deploy" word in home page', () => {
    render(<HomePage />);
    expect(
      screen.getByRole("heading", {
        name: /deploy/i,
      })
    ).toBeInTheDocument();
  });
});

Wallaby Extension

Una extension que tambien pueden utilizar en visual studio code para ver inmeditamente la ejecución de sus test es Wallabyjs

Recursos

• Nextjs Testing Docs
• Nextjs Testing Jest
• https://testing-library.com/