Crear un archivo de configuración previa de tests en Jest o Vitest

Crear un archivo de configuración previa de tests en Jest o Vitest

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo podemos crear un archivo de configuración previa de test para Jest o Vitest. Esto puede servirnos por ejemplo si necesitamos cargar los datos de usuario previamente a realizar los tests. Para lograr que se carguen algunos datos antes de realizar los tests tenemos que crear un archivo llamado tests.setup.tsx en … Leer más

Integrar pruebas Unitarias con Jest en React

Integrar pruebas Unitarias con Jest en React

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos integar prubas con Jest que nos permitan testear los componentes React creados. Lo primero que tenemos que hacer es instalar Jest: Instalamos testing-library/jest-dom: Instalamos ts-jest Instalamos: Instalaremos React testing library: O si usamos TypeScript: Además para typescript: Ahora vamos a crear la estructura de carpetas para nuestras pruebas con … Leer más

Principales Frameworks de Desarrollo Web y su Integración con TypeScript

Principales Frameworks de Desarrollo Web y su Integración con TypeScript

Tiempo de lectura: 2 minutos Los frameworks de desarrollo web son herramientas poderosas que permiten a los desarrolladores crear aplicaciones web de manera más eficiente y organizada. Muchos de estos frameworks son compatibles con TypeScript, lo que agrega beneficios adicionales en términos de seguridad y mantenibilidad del código. A continuación, presentaremos algunos de los frameworks más populares y su integración … Leer más

Añadir i18next para internacionalizar una APP React Native + Expo usando TypeScript

Añadir i18next para internacionalizar una APP React Native + Expo usando TypeScript

Tiempo de lectura: 2 minutos Hoy vamos a aprender cómo podemos internacionalizar y añadir multi lenguaje a una APP en React Native y usando TypeScript. Lo primero que haremos es instalar i18n: Una vez instalado, creamos una carpeta llamada language y dentro creamos un archivo i18next.ts Este archivo determinará automáticamente el idioma seleccionado en el dispositivo. El idioma por defecto … Leer más

Solucionar error: Unknown compiler option ‘allowImportingTsExtensions’. Usdando Sonarqube con React y TypeScript

Solucionar error: Unknown compiler option ‘allowImportingTsExtensions’. Usdando Sonarqube con React y TypeScript

Tiempo de lectura: < 1 minuto Hoy vamos a solucionar el error Unknown compiler option ‘allowImportingTsExtensions’ que aparece cuando intentamos analizar un proyecto TypeScript con SonarQube y React. El error se encuentra en tsconfig.json del proyecto de React, se soluciona eliminando la siguiente línea: isMa Ingeniero en Informática, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y … Leer más

Solucionar error Argument for ‘–moduleResolution’ option must be: ‘node’, ‘classic’, ‘node16’, ‘nodenext’.; en SonarQube con React TypeScript

Solucionar error Argument for ‘–moduleResolution’ option must be: ‘node’, ‘classic’, ‘node16’, ‘nodenext’.; en SonarQube con React TypeScript

Tiempo de lectura: < 1 minuto Hoy vamos a aprender cómo solucionar el error Argument for ‘–moduleResolution’ option must be: ‘node’, ‘classic’, ‘node16’, ‘nodenext’.; cuando intentamos analizar un proyecto React con TypeScript usando Sonarqube. Este error se localiza en el archivo tsconfig.json, ya que se incluye: Para solucionarlo pondremos: isMa Ingeniero en Informática, me encanta crear cosas o arreglarlas y darles … Leer más

Crear RadioGroup con RadioButtons usando React con TypeScript

Crear RadioGroup con RadioButtons usando  React con TypeScript

Tiempo de lectura: 2 minutos Vamos crear un componente de RadioGroup compuesto a su vez de RadioButtons. Primero vamos a crear el componente RadioGroup. Ahora creamos un componente RadioButton como muestro a continuación: Después vamos a usar los componentes de la siguiente manera. Por último muestro como queda el resultado. Espero que les sirva de ayuda. ¡Que tengan un feliz … Leer más

Crear componente de paginación para React

Crear componente de paginación para React

Tiempo de lectura: 2 minutos Hoy quería compartir una forma sencilla de implementar un componente de paginación utilizando Material-UI en React. Este componente es útil cuando se trabaja con listas extensas, permite navegar entre las diferentes páginas. Primero creamos el componente de paginación con sus atributos para después poder usarlo dónde lo necesitemos. En el ejemplo anterior, pasamos por parámetro … Leer más

Configurar SonarQube para permitir analizar código de TypeScript y React

Configurar SonarQube para permitir analizar código de TypeScript y React

Tiempo de lectura: 2 minutos Si deseas analizar un proyecto React que incluye archivos TypeScript (.ts y .tsx) con SonarQube, necesitarás configurar SonarQube para que admita TypeScript y también ajustar tu proyecto para que la configuración de análisis de SonarQube sea efectiva. A continuación, se describen los pasos generales: 1. Configurar SonarQube para admitir TypeScript: Asegúrate de tener SonarQube instalado … Leer más