Pruebas estáticas
Clase 7 de 27 • Curso de Introducción al Testing con JavaScript
Contenido del curso
Andrés Esteban Rodríguez Jiménez
student•
hace 4 años
Luis Abdel Rangel Castro
student•
hace un año
Clase 7 de 27 • Curso de Introducción al Testing con JavaScript
Contenido del curso
Andrés Esteban Rodríguez Jiménez
Luis Abdel Rangel Castro
Ángel Alberto Rivas Álvarez
Mariano Biondi
Luis Abdel Rangel Castro
Aarón Sánchez
Rubén Ernesto Aragón Gil
Miguel Angel Reyes Moreno
Jose Rodrigo Ospina Reyes
Federico Ivan Llano
Stefhanny Pamela Lázaro Rodríguez
Johanna Andrade Rivera
Johanna Andrade Rivera
Iván Antonio Bustos Calderón
Ángel Alberto Rivas Álvarez
Jose Rodrigo Ospina Reyes
Jorge Mario Martinez Martinez
Carlos Vicente
Hector Jose Flores Colmenarez
Fernando Leonel Poncio González
Juan Rossano
Roberto Contrera
Orlando Díaz Torrealva
Diego Vergara
Santiago Martinez Zavala
Daniel Mauricio Riaño Pedraza
Nicolas Molina
Luis Alberto Lavado Llaro
Catalina Quintero
Alvaro Eduardo Garzón Pira
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:
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, }, ... };
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...
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,
];
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!
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", }, },];
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) })
Que suave esta clase, neta. Mis respetos siempre para el profe Nicolás por explicar tan bien.
Wow, no sabía que estos también se consideraban pruebas, ¡excelente! :D
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
no me marca los errores, antes funcionaba sin problemas, mejor aprender a programar con typescript 🤣
me pasa lo mismo, no me marca los errores, al correrlo por por archivo si detecta pero no marca en vs :(
🚀🚀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! 🫶
//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, ]);
Para instalar eslint:
npm install -D eslint
Para configurarlo:
npx eslint --init
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 \[   {   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, ];
Estoy utilizando npm, sería igual, la verdad no eh podido configurar el eslint
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>
"lint": "eslint "/*.{js,jsx}"", "lint:fix": "eslint "/*.{js,jsx}" --fix"
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, }, }, ]);
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": { } }
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
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
Mi estilo favorito es el de StandardJS :D
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.
En 2026 la configuración ya no funciona, este curso ya esta muy deprecado deberían de renovarlo
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?
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.
Para 2025 con la version 9.33.0 de eslint, Debes instalar:
npm i -D eslint
y
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" } }, ]);
¿Saben como arreglar este error?
npm ERR! Missing script: "lint:fix"
Hola Catalina, ¿Qué comando ejecutaste, podrías compartirnos el archivo package.json? Pareciera que intentas ejecutar un script que no existe.