Lecciones del curso

Testing en React con Jest y testing-library

Instalando Jest en nuestro proyecto
20m
Básicos de Jest
Matchers segunda parte
Números
Arrays
Async
Mocks primera parte
Mocks segunda parte
Mocks tercera parte
Testing sexta parte
Testing séptima parte
Matchers primera parte
Testing en Create React app
Explorando react-testing-library
Explorando testing-library/jest-dom
Detonando eventos con testing-library
Testing con snapshots
11m
Explorando el proyecto
Testeando nuestro primer componente con redux parte 1
Testeando nuestro primer componente con redux parte 2
Testing de actions creators y thunks (acciones asíncronas)
Testing reducers
Mock Avanzado: Peticiones http con msw.js
21m
Mock axios
Router primera parte
Router segunda parte
Router tercera parte
Router cuarta parte

Instalando jest

Para esta lección vamos a instalar y configurar jest en un proyecto simple hecho por nosotros desde cero, tranquilo, será un proyecto muy sencillo.

Nota: De aquí en adelante asumiremos que ya tienes instalado nodejs, de no ser así, puedes descargarlo aquí, sin embargo, te sugerimos intalarlo mediante nvm, un manejador de versiones de nodejs.

Creando el proyecto

Nuestro proyecto estará construido de la siguiente manera:

  1. Crearemos una carpeta donde estarán todo los archivos de nuestro proyecto con el comando mkdir, en mi caso lo nombraré como jest-basics.
  2. Con el comando yarn init o npm init crearemos un package.json.
  3. Crearemos un archivo llamado app.test.js dentro nuestra carpeta y a la misma altura de nuestro package.json.

Hasta este momento debemos tener una estructura como esta:

.
└── jest-basics/
    ├── package.json
    └── app.test.js

Una vez creado nuestro proyecto comenzaremos la configuración, a continuación los comandos y código que usaremos.

Instalación de jest

// yarn
$ yarn add -D jest

//npm
$ npm i -D jest

package.json scripts

{
  // ...package.json config
  "scripts": {
    "test": "jest --watchAll"
  }
}

Pueden encontrar el repo en github aquí