Configura React Testing Library con TypeScript

Las pruebas son fundamentales para asegurar la estabilidad y calidad de una aplicación. En esta entrada, aprenderás a configurar tu proyecto de React utilizando React Testing Library junto con TypeScript.

Instalación de paquetes:

Para comenzar, necesitarás instalar algunos paquetes. Utiliza el siguiente comando para agregar las herramientas necesarias. Esta vez, utilizaremos el gestor de paquetes de PNPM :

pnpm install --save-dev -E jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

Para hacerlo funcionar con TypeScript, agrega los siguientes paquetes adicionales:

pnpm install --save-dev -E ts-jest @types/jest @types/testing-library__react @types/testing-library__jest-dom

Configuración inicial:

Una vez instalados los paquetes, es crucial establecer la configuración necesaria. Ejecuta el siguiente comando para inicializar la configuración de ts-jest:

npx ts-jest config:init

Modifica el archivo jest.config.js de la siguiente manera:

jest.config.js

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  globals: {
    'ts-jest': {
      isolatedModules: true,
    },
  },
}

Luego, agrega una configuración al archivo tsconfig.json con el siguiente contenido. Es importante cambiar esModuleInterop a true dado que algunas librerías pueden dar error cuando se lanza jest:

tsconfig.json

{
  "compilerOptions": {
    "types": ["jest"],
    "esModuleInterop": true
  }
}

Haz una copia del archivo tsconfig.json con el nombre tsconfig.build.json. Este archivo se utilizará cuando Vite construya el proyecto.

Configuración adicional:

En el archivo tsconfig.build.json, modifica y agrega las siguientes opciones:

tsconfig.build.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["./src"],
  "exclude": ["**/*.spec.tsx"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Es importante excluir todos los archivos .spec.tsx para acelerar el proceso de construcción.

Finalmente, en el archivo package.json, ajusta los scripts de la siguiente manera:

package.json

"scripts": {
  ...
  "build": "tsc --project tsconfig.build.json && vite build",
  "test": "tsc && jest"
},