Pruebas estáticas

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:

1. Si queremos hacer un check de nuestra sintaxis

2. Si queremos hacer check de sintaxis y encontrar problemas

3. 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,
  },
  ...
};

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

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)
  })

Para instalar eslint:

npm install -D eslint

Para configurarlo:

npx eslint --init

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

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>

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 😄

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.

Para saber cuantos errores detectados por eslint tiene su proyecto, vayan a la barra de estatus de vscode, que se encuentra por defecto abajo de todo del editor, y hagan click en un icono con una X, al hacer click se va a abrir esta pestaña

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

ESLint para pruebas estaticas, correcion automatica de codigo (se corrije lo que se econfugire en le archivo .eslint.js)

Increíble explicación. Muchas gracias, Nicolas.

Comparto con ustedes la configuración usada por Nicolás. Espero les sea útil al momento de iniciar nuevos proyectos.

✔ How would you like to use ESLint? To check syntax, find problems, and enforce code style
✔ What type of modules does your project use? commonjs
✔ Which framework does your project use? none
✔ Does your project use TypeScript? No
✔ Where does your code run? Node
✔ How would you like to define a style for your project? Guide
✔ Which style guide do you want to follow? Airbnb
✔ What format do you want your config file to be in? JavaScript