Configura React Testing Library con TypeScript

Instalación de paquetes:

Para comenzar, necesitarás instalar algunos paquetes. Utiliza el siguiente comando para agregar las herramientas necesarias:

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

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

npm install --save-dev 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:

/** @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:

{ "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:

{ "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:

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