Auto import Components en React sin archivos abiertos

karluxio — Thu, 04 May 2023 15:54:24 +0000

Esta guía simple para vscode, nos sirve para poder importar los componentes de React en cualquier punto de la App sin la necesidad de tenerlos abiertos.
Para eso tendremos que crear un archivo llamado jsconfig.js en la raiz de la aplicación y colocar el siguiente código:

{
    "compilerOptions": {
        "target": "es6",
        "allowSyntheticDefaultImports": true
    }
}

Instalación y configuración de Jest + React Testing Library - Vite

karluxio — Wed, 03 May 2023 04:35:36 +0000

Configuración rápida de Jest y react Testing Library en proyectos de React creados con Vite

1. Instalación de Jest:

pnpm i -D jest babel-jest @babel/core @babel/preset-env @babel/preset-react

2. Instalación de React Testing Library:

pnpm i -D @testing-library/react @types/jest jest-environment-jsdom

3. Opcional: Si usamos Fetch API en el proyecto con node inferior a la versión 18:

pnpm i -D whatwg-fetch

4. Actualizar los scripts del package.json

"scripts: {
  ...
  "test": "jest --watchAll"

5. Crear la configuración de babel: babel.config.cjs en la raiz del proyecto:

module.exports = {
    presets: [
        [ '@babel/preset-env', { targets: { esmodules: true } } ],
        [ '@babel/preset-react', { runtime: 'automatic' } ],
    ],
};

6. Opcional, pero eventualmente necesario, crear Jest config y setup en la raiz del proyecto:

jest.config.js

module.exports = {
    testEnvironment: 'jest-environment-jsdom',
    setupFiles: ['./jest.setup.js']
}

jest.setup.js

// En caso de necesitar la implementación del FetchAPI
import 'whatwg-fetch'; // <-- yarn add whatwg-fetch

DEV Community: karluxio