Cómo instalar JEST en un proyecto con ECMAScript Modules (import/export)

Para instalar Jest en tu proyecto, basado en ESM (ECMA Script Modules), es decir usando import/export como método para importar y exportar módulos, debemos hacer lo siguiente:

1. Instalación de Jest y dependencias

Ejecuta el siguiente comando en tu terminal para instalar Jest y sus dependencias de desarrollo:

npm install --save-dev jest

Este comando instala las dependencias necesarias en la carpeta node_modules, y crea los archivos package-lock.json y package.json. El archivo principal con el que trabajaremos es package.json.

2. Configuración de scripts en el package.json

Dentro del archivo package.json verás que se ha instalado ya la dependencia de Jest:

{
  "devDependencies": {
    "jest": "^29.7.0"
  }
}

Dentro de este archivo agregaremos un objeto extra, el mismo que nos permitirá ejecutar el comando test en el terminal:

"scripts": {
  "test": "jest --coverage"
},

Este script habilita la ejecución del comando npm test, que a su vez ejecuta Jest con la opción --coverage para generar informes de cobertura.

El archivo completo debería quedar de la siguiente forma:

{
  "devDependencies": {
    "jest": "^29.7.0"
  },
  "scripts": {
    "test": "jest --coverage"
  }
}

3. Configuración de Babel

Instala la dependencia babel-jest con el siguiente comando:

npm install --save-dev babel-jest

babel-jest es un adaptador que permite a Jest trabajar con Babel para la transformación de código. Jest utiliza transformadores para entender y ejecutar código que puede no ser nativo de Node.js, como el código escrito en ECMAScript 6 (ES6) o superior.

Luego, agrega la siguiente configuración al objeto "jest" dentro de el archivo package.json para indicar a Jest que utilice Babel para transformar los archivos con extensiones .js y .jsx:

"jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  }

El archivo package.json de tener la siguiente estructura:

{
  "devDependencies": {
    "babel-jest": "^29.7.0",
    "jest": "^29.7.0"
  },
  "scripts": {
    "test": "jest --coverage"
  },
  "jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  }
}

4. Instalación de Presets de Babel

Ejecuta el siguiente comando para instalar el preset de Babel para entornos de desarrollo:

npm install @babel/preset-env --save-dev

Finalmente agrega un nuevo archivo llamado babel.config.json en la raíz del proyecto con el siguiente contenido:

{
  "presets": ["@babel/preset-env"]
}

Listo, esta es la configuración necesaria para trabajar con Jest en tu proyecto basado en ESM. El siguiente paso sería crear tus tests. Si aún no sabes como crear uno, te recomiendo este post donde te enseño a crear tu primer test con Jest.

Y si te gustó este contenido y quieres saber más sobre desarrollo web, te recomiendo visitar mi canal de YouTube CodingTube 💻