Pruebas estáticas

Clase 7 de 27 • Curso de Introducción al Testing con JavaScript

Clase anteriorSiguiente clase

Andrés Esteban Rodríguez Jiménez

student•

Pruebas estáticas

Las pruebas estáticas se caracterizan por no ejecutar código, solo lo analizan y nos dan un feedback temprano.

Estas nos ayudan a ver si estamos teniendo buenas prácticas al escribir nuestro código.

Hay herramientas que nos ayudan a ejecutar esta pruebas estáticas como lo son:

ESLint
Prettier
TypeScript

Vamos a empezar a crear pruebas estáticas con ESLint, para esto debemos instalarlo:

npm i -D eslint

Luego de instalarlo, vamos a ejecutar el siguiente comando que nos permitirá traer ciertas configuraciones y establecer configuraciones por defecto:

npx eslint --init

Luego nos va a preguntar las siguientes opciones:

Si queremos hacer un check de nuestra sintaxis
Si queremos hacer check de sintaxis y encontrar problemas
Si queremos hacer check de sintaxis, encontrar problemas y forzar el estilo de código

Luego nos preguntará una serie de cosas relacionadas a que tecnologías estamos utilizando en nuestro proyecto, respondemos estas preguntas.

Luego nos pregunta si corre en navegador o en un entorno de Node.

Nos pregunta si queremos usar una guía de estilo de código, la más popular y las más recomendable suele ser la de Airbnb.

Luego elegimos el formato del código.

Por ultimo nos pregunta si deseamos instalar esos paquetes.

Ya con esto podemos tener un análisis de código estático para poder tener un estándar en el cual nos podamos basar a la hora de escribir nuestro código y siguiendo buenas practicas, siguiendo un estándar que nos permita escribir un código de la misma forma siguiendo convenciones.

Luego en el archivo de configuración package.json podemos establecer un script que nos permita hacer un examen de cualquier archivo en nuestra carpeta scr.

{
  ...
  "scripts": {
    ...
		// Marca los errores
    "lint": "eslint src/**",
		// Marcar los errores y arreglar los problemas
    "lint:fix": "eslint src/** --fix"
  },
  ...
}

Arreglar errores de Jest

Para que no nos salte errores cuando usamos nuestras funciones de Jest usamos en el archivo de configuración de .eslint.js la siguiente configuración:

module.exports = {
  env: {
    ...
		// Todo lo que venga de Jest no los alerta
    jest: true,
  },
  ...
};

Luis Abdel Rangel Castro

student•

Podemos utilizar npx eslint --inspect-config para lanzar un asistente que te enviará al ESLint Config Inspector, una web local donde verás cómodamente las reglas activadas, tu configuración...

Ángel Alberto Rivas Álvarez

student•

Si están viendo este curso en el 2024. Los archivos de configuración de ESLint han cambiado y requieren una configuración diferente a lo que se muestra en el video.

Primero tienen que instalar esté paquete.

npm install --dev eslint eslint-plugin-jest

Y despues tienen que configurar su archivo esling.config.mjs de esta forma:

import globals from "globals";

import pluginJs from "@eslint/js";

import jest from 'eslint-plugin-jest';

export default [

{

files: ["**/*.js"],

languageOptions: {sourceType: "commonjs"},

...jest.configs['flat/recommended'],

rules: {

...jest.configs['flat/recommended'].rules,

'jest/prefer-expect-assertions': 'off',

},

{languageOptions: { globals: globals.node }},

pluginJs.configs.recommended,

];

Mariano Biondi

student•

Hola Angel, probé con esta opción pero sigue sin aparecerme la opción "To check syntax, find problems and enforce code style". Cuando selecciono la opción de correr el codigo en Node, me devuelta el msj "The config that you've selected requires the following dependencies:

eslint@9.x, globals, @eslint/js"

Algun consejo? Muchas gracias por tu aporte!

Luis Abdel Rangel Castro

student•

eslint.config.mjs

import globals from "globals"; import pluginJs from "@eslint/js"; import jest from "eslint-plugin-jest"; export default [ { files: ["**/*.js"], languageOptions: { sourceType: "commonjs" }, ...jest.configs["flat/recommended"], rules: { ...jest.configs["flat/recommended"].rules, "jest/prefer-expect-assertions": "off", }, }, { languageOptions: { globals: globals.node } }, pluginJs.configs.recommended, { rules: { "no-var": "error", }, },];

Aarón Sánchez

student•

Les comparto un test de promedio:

02-math.js

Cree una función que recibe un array donde valida que no vaya vacio.

const average = (values) => {

  const valuesLength = values.length
  if(valuesLength === 0) return null

  const totalValues = values.reduce((a, b) => a + b, 0)

  return totalValues / valuesLength
}

02-math.test.js Cree dos test, el primero valida que calcule correctamente el promedio de un array de elementos y el otro que retorne null al ser un array vacio.

  test("Average 2, 3, 3, 5, 7 and 10", () => {
    const values = [2, 3, 3, 5, 7, 10];
    const result = average(values)
    expect(result).toBe(5)
  });

  test("Should average for 0", () => {
    const result = average([])
    expect(result).toBe(null)
  })

Rubén Ernesto Aragón Gil

student•

Que suave esta clase, neta. Mis respetos siempre para el profe Nicolás por explicar tan bien.

Miguel Angel Reyes Moreno

student•

Wow, no sabía que estos también se consideraban pruebas, ¡excelente! :D

Jose Rodrigo Ospina Reyes

student•

Pregunta compañeros, estoy viendo el curso 2024, pero al realizar la instalación cambia demasiado, yo imagino que es por la versión, no se si tengan una guía de instalación actual o un video

Federico Ivan Llano

student•

no me marca los errores, antes funcionaba sin problemas, mejor aprender a programar con typescript 🤣

Stefhanny Pamela Lázaro Rodríguez

student•

me pasa lo mismo, no me marca los errores, al correrlo por por archivo si detecta pero no marca en vs :(

Johanna Andrade Rivera

student•

🚀🚀Si estás por aquí en el 2025, a Abril, la configuración ha cambiado un poco a como se muestra en el video. Seguí unos pasos que vi más abajo en los comentarios pero no me sirvió🥴, así que les comparto lo que a mi me funcionó por si algun@ tiene el mismo problema:

1. Instalar el plugin de eslint-jest npm install -D eslint eslint-plugin-jest (En mi caso se instaló la versión 28.11.0) ✅

2. En el archivo eslint.config.mjs, agregar y/o tener el siguiente código: import js from "@eslint/js"; import globals from "globals"; import { defineConfig } from "eslint/config"; import jest from 'eslint-plugin-jest';

export default defineConfig([ { files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"] }, { files: ["**/*.js"], languageOptions: { sourceType: "commonjs" } }, { ...jest.configs['flat/recommended'], rules: { ...jest.configs['flat/recommended'].rules, 'jest/prefer-expect-assertions': 'off', }, }, { files: ["**/*.{js,mjs,cjs}"], languageOptions: { globals: globals.browser } }, {languageOptions: { globals: globals.node }}, js.configs.recommended,

]);

⚠️ Revisen bien , las { } , ya que podría generarles algún error.

3. En los archivos de test (01-sum.test.js y 02-math.test.js) ya se desaparecen las alertas por las palabras test y expect.

Espero les sirva de gran ayuda! 🫶

Johanna Andrade Rivera

student•

//Archivo eslint.config.mjs

import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";
import jest from 'eslint-plugin-jest';


export default defineConfig([
  { files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"] },
  { files: ["**/*.js"], languageOptions: { sourceType: "commonjs" } },
  {
    ...jest.configs['flat/recommended'],
    rules: {
      ...jest.configs['flat/recommended'].rules,
      'jest/prefer-expect-assertions': 'off',
    },
  },
  { files: ["**/*.{js,mjs,cjs}"], languageOptions: { globals: globals.browser } },
  {languageOptions: { globals: globals.node }},
  js.configs.recommended,

]);
```import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";
import jest from 'eslint-plugin-jest';


export default defineConfig(\[
{ files: \["\*\*/\*.{js,mjs,cjs}"], plugins: { js }, extends: \["js/recommended"] },
{ files: \["\*\*/\*.js"], languageOptions: { sourceType: "commonjs" } },
{
...jest.configs\['flat/recommended'],
rules: {
...jest.configs\['flat/recommended'].rules,
'jest/prefer-expect-assertions': 'off',
},
},
{ files: \["\*\*/\*.{js,mjs,cjs}"], languageOptions: { globals: globals.browser } },
{languageOptions: { globals: globals.node }},
js.configs.recommended,

]);

Iván Antonio Bustos Calderón

student•

Para instalar eslint:

npm install -D eslint

Para configurarlo:

npx eslint --init

Ángel Alberto Rivas Álvarez

student•

Si están viendo este curso en el 2024. Los archivos de configuración de ESLint han cambiado y requieren una configuración diferente a lo que se muestra en el video.

Primero tienen que instalar esté paquete.

yarn add --dev eslint eslint-plugin-jest

Y despues tienen que configurar su archivo esling.config.mjs de esta forma:

import globals from "globals";
import pluginJs from "@eslint/js";
import jest from 'eslint-plugin-jest';

export default [
  {
    files: ["**/*.js"],
    languageOptions: {sourceType: "commonjs"},
    ...jest.configs['flat/recommended'],
    rules: {
      ...jest.configs['flat/recommended'].rules,
      'jest/prefer-expect-assertions': 'off',
    },
  },
  {languageOptions: { globals: globals.node }},
  pluginJs.configs.recommended,
];

```import globals from "globals";

import pluginJs from "@eslint/js";

import jest from 'eslint-plugin-jest';



export default \[

&#x20; {

&#x20;   files: \["\*\*/\*.js"],

&#x20;   languageOptions: {sourceType: "commonjs"},

&#x20;   ...jest.configs\['flat/recommended'],

&#x20;   rules: {

&#x20;     ...jest.configs\['flat/recommended'].rules,

&#x20;     'jest/prefer-expect-assertions': 'off',

&#x20;   },

&#x20; },

&#x20; {languageOptions: { globals: globals.node }},

&#x20; pluginJs.configs.recommended,

];

Jose Rodrigo Ospina Reyes

student•

Estoy utilizando npm, sería igual, la verdad no eh podido configurar el eslint

Jorge Mario Martinez Martinez

student•

PS C:\Users\jotam\OneDrive\Escritorio\testing-js\demos> npm run lint

eslint src/**

Oops! Something went wrong! :(

ESLint: 8.25.0

No files matching the pattern "src/**" were found. Please check for typing mistakes in the pattern.

PS C:\Users\jotam\OneDrive\Escritorio\testing-js\demos>

Carlos Vicente

student•

"lint": "eslint "/*.{js,jsx}"", "lint:fix": "eslint "/*.{js,jsx}" --fix"

Fernando Leonel Poncio González

student•

Está fue la configuración que hice para el archivo eslint.config.mjs que me funcionó. Espero y les ayude esto, ya que con el paso del tiempo esta configuración ha cambiado:

eslint.config.mjs

import globals from 'globals';
import pluginJs from '@eslint/js';
import jest from 'eslint-plugin-jest';
import importPlugin from 'eslint-plugin-import';
import bestPractices from 'eslint-config-airbnb-base/rules/best-practices';
import errors from 'eslint-config-airbnb-base/rules/errors';
import node from 'eslint-config-airbnb-base/rules/node';
import style from 'eslint-config-airbnb-base/rules/style';
import variables from 'eslint-config-airbnb-base/rules/variables';
import es6 from 'eslint-config-airbnb-base/rules/es6';
import imports from 'eslint-config-airbnb-base/rules/imports';
import strict from 'eslint-config-airbnb-base/rules/strict';

export default [
  {
    name: 'eslint-recommended-configuration',
    languageOptions: {
      globals: globals.node,
    },
  },
  {
    name: 'jest-recommended-configuration',
    files: ['**/*.test.js'],
    languageOptions: {
      sourceType: 'commonjs',
    },
    ...jest.configs['flat/recommended'],
    rules: {
      ...jest.configs['flat/recommended'].rules,
      'jest/prefer-expect-assertions': 'off',
    },
  },
  {
    name: 'airbnb-plugin-configuration',
    plugins: {
      import: importPlugin,
    },
    rules: {
      ...bestPractices.rules,
      ...errors.rules,
      ...node.rules,
      ...style.rules,
      ...variables.rules,
      ...es6.rules,
      ...imports.rules,
      ...strict.rules,
    },
  },
  pluginJs.configs.recommended,
];
```Y mi package.json quedaría así luego de instalar eslint-plugin-jest, eslint-plugin-import y eslint-config-airbnb-base:



*package.json*

```js
{
  "name": "demos",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest",
    "lint": "eslint src/**",
    "lint:fix": "eslint src/** --fix"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@eslint/js": "^9.12.0",
    "eslint": "^8.57.1",
    "eslint-plugin-jest": "^28.8.3",
    "globals": "^15.10.0",
    "jest": "^29.7.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.31.0"
  },
  "dependencies": {
  }
}

Juan Rossano

student•

Despues de la pregunta si queria instalar los paquetes ma agrego la pregunta de que manejador entre npm, yarn y pnpm. Yo elegi npm pero me agrego esa pregunta en comparacion con el video

Roberto Contrera

student•

Para los que tienen problemas con el espaciado que deja el enter en windows (LF CRLF Error), usen

  rules: {
    'linebreak-style': 0,
  },

en el documento .eslintrc.js

Orlando Díaz Torrealva

student•

Mi estilo favorito es el de StandardJS :D

Diego Vergara

student•

Al igual que el profesor recomiendo Typescript 100% además de ayudar con los errores te ayuda a ser más ordenado gracias a las interfaces y tipos.

Hector Jose Flores Colmenarez

student••

Para los que están por aquí a mediados de la fecha de publicación de este post tratando de hacer esta configuración.

ESLint acaba de publicar su version 9 y actualmente no hay una actualizacion de los paquetes eslint-config-airbnb (y eslint-config-airbnb-base), que son los paquetes originales de Airbnb

Por lo que sugeria solo completar la configuracion para ESLint y continuar

Con respecto a como quedaria nuestro archivo eslint.config.mjs


import js from "@eslint/js";
import globals from "globals";
import { defineConfig } from "eslint/config";
import jestPlugin from "eslint-plugin-jest";
export default defineConfig([
  { files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
  { files: ["**/*.js"], languageOptions: { sourceType: "commonjs" } },
  {
    files: ["**/*.test.js", "**/*.spec.js"],
    plugins: { jest: jestPlugin },
    languageOptions: {
      globals: {
        ...globals.jest,
      },
    },
    rules: {
      ...jestPlugin.configs.recommended.rules,
    },
  },
]);

Luis Alberto Lavado Llaro

student•

Para 2025 con la version 9.33.0 de eslint, Debes instalar:

npm i -D eslint

npm i eslint-plugin-jest -D

Luego

npx eslint --init

y en tu archivo eslint.config.mjs:

import js from "@eslint/js";

import globals from "globals";

import jest from "eslint-plugin-jest";

import { defineConfig } from "eslint/config";




export default defineConfig(\[

  // Reglas base para tu código fuente

  {

    files: \["src/\*\*/\*.{js,mjs,cjs}"],

    languageOptions: {

      // si tu código corre en Node y también usa APIs de navegador, mezcla ambos

      globals: { ...globals.node, ...globals.browser },

    },

    ...js.configs.recommended,

    rules: {

      // .editorconfig → ESLint core

      indent: \["error", 2],                 // indent\_style + indent\_size

      "linebreak-style": \["error", "unix"], // end\_of\_line = lf

      "no-trailing-spaces": "error",        // trim\_trailing\_whitespace = true

      "eol-last": \["error", "always"],      // insert\_final\_newline = true

      "max-len": "off",                     // max\_line\_length = off

      "no-var": "error",                    // Evita var

      "prefer-const": "error"               // Si la variable no se reasigna, sugiere const

    },

  },

  // Reglas específicas para tests (Jest)

  {

    files: \[

      "\*\*/\*.{test,spec}.{js,mjs,cjs}",

      "\*\*/\_\_tests\_\_/\*\*/\*.{js,mjs,cjs}",

    ],

    languageOptions: {

      // Jest corre en Node; agrega los globals de Jest

      globals: { ...globals.node, ...globals.jest },

    },

    plugins: { jest },

    // aplica el preset recomendado del plugin (formato flat)

    ...jest.configs\["flat/recommended"],

    rules: {

      // Mantén las mismas reglas de formato en tests

      indent: \["error", 2],

      "linebreak-style": \["error", "unix"],

      "no-trailing-spaces": "error",

      "eol-last": \["error", "always"],

      "max-len": "off",

    },

  },

  // Excepción para CHANGELOG.md (no aplicar indentación)

  {

    files: \["CHANGELOG.md"],

    rules: {

      indent: "off",

    },

  },

  // Archivos CommonJS sueltos

  {

    files: \["\*\*/\*.cjs"],

    languageOptions: { sourceType: "commonjs" }

  },

]);

Daniel Mauricio Riaño Pedraza

student•

Mi pregunta es si ya tengo un proyecto creado en python como puedo hacer para que pueda hacer las pruebas con jest y ademas que funcione el eslint fix?

Nicolas Molina

teacher•

Hola, si tienes el proyecto en Python no te va a funcionar, ya que estas herramientas: Jest y ESLint solo están para el ecosistema de JavaScript, sin embargo, también Pyhton tiene linters y frameworks de testing que puedes explorar.

Catalina Quintero

student•

¿Saben como arreglar este error?

npm ERR! Missing script: "lint:fix"

Alvaro Eduardo Garzón Pira

student•

Hola Catalina, ¿Qué comando ejecutaste, podrías compartirnos el archivo package.json? Pareciera que intentas ejecutar un script que no existe.

Juan Rossano

student•

El archivo que genera eslint dice que hereda de airbnb ¿se puede acceder a ese archivo para analizarlo y hacer algunos cambios creando una configuracion propia de la que heredar?

Axel Enrique Galeed Gutierrez

student•

Hola, @JuanRossano. 😀 No hace falta ingresar al archivo de configuración de Airbnb, podes directamente sobrescribir las reglas desde la sección de rules de tu archivo de configuración de ESLint. Te dejo un ejemplo:

{
	"rules": {
		"prefer-const": "error",
	}
}

Te dejo el link directo a todas las reglas disponibles en ESLint. De toda forma, si aún querés ver las reglas que usa Airbnb te dejo su repositorio de GitHub.

Saludos. 😁