Cómo instalar JEST en un proyecto con ECMAScript Modules (import/export)
Tags: testing, webdev, javascript, beginners
Published: 2023-11-15 17:09:37

Para instalar [Jest](https://dev.to/davichobits/introduccion-a-jest-y-su-importancia-en-el-desarrollo-de-software-4h7l) 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:
```sh
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:

```json
{
  "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:
```json
"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:
```json
{
  "devDependencies": {
    "jest": "^29.7.0"
  },
  "scripts": {
    "test": "jest --coverage"
  }
}
```
## 3. Configuración de Babel 
Instala la dependencia `babel-jest` con el siguiente comando: 
```sh
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:
```json
"jest": {
    "transform": {
      "^.+\\.[t|j]sx?$": "babel-jest"
    }
  }
```
El archivo `package.json` de tener la siguiente estructura:
```json
{
  "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:
```sh
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:
```json
{
  "presets": ["@babel/preset-env"]
}
```
Listo, esta es la configuración necesaria para trabajar con [Jest](https://dev.to/davichobits/introduccion-a-jest-y-su-importancia-en-el-desarrollo-de-software-4h7l) en tu proyecto basado en ESM. El siguiente paso sería crear tus [tests](https://dev.to/davichobits/que-es-y-para-que-sirve-el-testing-en-javascript-nc6). 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](https://www.youtube.com/CodingTube) 💻