Pruebas unitarias en Next.js (con TypeScript)

Para configurar pruebas unitarias en una aplicación Next.js con TypeScript, puedes usar Jest y React Testing Library. Aquí están los pasos para configurar tu proyecto:

1. Instala los paquetes requeridos:

bashCopy codenpm install --save-dev jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom @testing-library/user-event @testing-library/dom babel-jest

2. Crea un archivo jest.config.js en la raíz de tu proyecto con la siguiente configuración:

javascriptCopy codemodule.exports = {
  roots: ['<rootDir>'],
  testPathIgnorePatterns: ['/node_modules/', '/.next/'],
  setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
  },
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
};

3. Crea un archivo babel.config.js en la raíz de tu proyecto con la siguiente configuración:

javascriptCopy codemodule.exports = {
  presets: ['next/babel'],
};

4. Crea un archivo setupTests.js en la raíz de tu proyecto con el siguiente contenido:

javascriptCopy codeimport '@testing-library/jest-dom/extend-expect';

5. Actualiza tu archivo tsconfig.json para incluir los types de Jest:

jsonCopy code{
  "compilerOptions": {
    ...
    "types": ["jest", "node"]
  }
}

6. Actualiza tu archivo package.json para incluir un script de prueba:

jsonCopy code{
  "scripts": {
    ...
    "test": "jest"
  }
}

Ahora, puedes escribir pruebas para tus componentes:

1. Crea un nuevo archivo de prueba, por ejemplo, components/__tests__/MyComponent.test.tsx, donde MyComponent es el nombre de tu componente.
2. Escribe pruebas utilizando Jest y React Testing Library:

typescriptCopy codeimport React from 'react';
import { render, screen } from '@testing-library/react';
import MyComponent from '../MyComponent';

describe('MyComponent', () => {
  it('renders the component', () => {
    render(<MyComponent />);
    expect(screen.getByText('Hello, Next.js!')).toBeInTheDocument();
  });
});

Reemplaza MyComponent con tu componente real y actualiza la prueba según corresponda.

3. Ejecuta tus pruebas usando el siguiente comando:

bashCopy codenpm test

Jest ejecutará las pruebas y mostrará los resultados en la terminal.

Ahora puedes comenzar a escribir pruebas unitarias para tu aplicación Next.js con TypeScript usando Jest y React Testing Library.

Ejemplo: github repo