Preparar proyecto

Carlos Luis Marin

student•

Otro curso desactualizado.... Gracias Platzi

Flor Lugo

student•

Si quieres utilizar esa version de React y Node que utilizan en el curso puedes aprender Docker para que pueda seguir el curso con los mismo comando y sintaxis

Alan David R.L.

student•

Mis notas de la clase

Necesitamos instalar las dependencias necesarias para hacer test a los componentes, estas son:

npm i -D jest enzyme enzyme-adapter-react-16

enzyme: Es una librería creada por airbnb para facilitar el test a componentes en React
enzyme-adapter-react-16: Es un adaptador para la versión de React que estemos utilizando.

Más información en la documentación

Configuración en package.json

Le pasamos la configuración del adaptador al projecto.

"jest": {
  "setupFilesAfterEnv": [
    "<rootDir>/src/__test__/setupTest.js"
  ]
}

Rodrigo Reyes

student•

Hey bro gracias por las notas! tienes tus apuntes juntos?

Alan David R.L.

student•

No los tengo, solo los comentarios que puse en el curso

Paolo Carrion

student•

Diferencias entre Enzyme y React Testing Libery

_ Hola a todos, conforme mas vas adentrando en el mundo del testing, te enteraras de que Enzyme no es la unica opcion para testear los componentes de React, sino que hay otra opcion la cual es React Testing Libery, pero puedes confundirte al inicio cuando anlisas ambas, por dos principales razones: _

Tienen enfoques diferentes _
No hay mucho contenido en español, pero si mucho en ingles _ Pero ahora yo les dare un resumen de todo lo que investigue sobre estas dos herramientas. _

Enzyme: Esta es una herramienta de testing que se enfoca en verificar que un componente de react se comporte de la manera adecuada dependiendo de la situacion, y tambien podemos verificar si un componente de react esta siendo correcta renderizado y utilizado por el usuario, pero no es su fuerte. _ React Testing Libery: Esta es igual otra herramienta de testing que se enfoca en verificar que un componente esta siendo renderizado correctamente en el DOM y que el usuario lo esta usando adecuadamente, pero no podermos verificar su comportamiento interno, por ejemplo no podemos acceder a las props o el state del componente de react testeado. _ Espero haberlos ayudado. Saludos.

silvana murgo

student•

Si a alguien mas le sale este problema.

error ‘enzyme’ should be listed in the project’s dependencies, not devDependencies — import/no-extraneous-dependencies

Les dejo un tutorial con la solucion https://medium.com/defmethod-works/sharable-eslint-config-b96af3b93960

Alessandra Amicarella

student•

Muchas gracias por el aporte!

Rodrigo Roldan

student•

Muchas gracias por tu aporte

Juan Camilo Guzman Sandoval

student•

Si estan usando la version 17 de React pueden usar

npm i jest enzyme @wojtekmaj/enzyme-adapter-react-17 -D

Jonathan Gonzalez Botero

student•

Gracias bro, con esto me logro correr las pruebas, estaba atascado con un error X

Andrés Felipe Eslava Zuluaga

student•

Graacias!!

Jesus Abraham Berzunza Pavón

student•

Esta clase debería estar antes de "Probar peticiones fetch"

Oscar Barajas Tavares

Team Platzi•

Vamos a corregir el orden del curso. "Probar peticiones fetch" es la ultima de esta unidad.

Jean Nuñez

student•

Lo mismo pienso, no se porque lo hicieron asi

Daniel Reyes

student•

Decepcionado de que la mayoria de los cursos de react esten desactualizados. Creo que no volvere a pagar la suscripcion

Carlos David Ramírez Gómez

student•

Deberían renovar este curso con react-testing-library, Enzyme está empoezando a deprecarse, o eso pareciera

Iván Darío Sánchez Jiménez

student•

2 años desde su última publicación

Rene Ismael Barrios Rojas

student•

Lo ideal es hacerle test desde que vas creando cada componente no? o cual es la mejor practica? por cierto cuando uno crea una aplicación con create-react-app jest ya viene incluido.

Oscar Barajas Tavares

Team Platzi•

Si el camino idóneo es ir creando las pruebas conforme avances en tu desarrollo, esto te permite entender el alcance que tendrá tu proyecto y si en un futuro debes de cambiar algo darte cuenta si esto interfiere con tu proyecto.

Oscar Barajas Tavares

Team Platzi•

Si, ya se encuentra disponible dentro de los scripts que maneja "create-react-app" lo cual te permite ejecutar las pruebas que vas creando dentro de tu proyecto.

Lo que no esta incluido es Enzyme.

Luis Eduardo Alcantara Olvera

student•

Para los que tenga problemas al iniciar el proyecto. usen nvm para usar una version especifica de node y npm

nvm

Ejecuten

nvm install 11.15.0
nvm use 11.15.0

y ahora si pueden ejecutar:

npm install

Ariel Ricardo Delgadillo Terrazas

student•

Si está usando windows, les dejo una guía de como instalar NVM https://learn.microsoft.com/es-es/windows/dev-environment/javascript/nodejs-on-windows

Luis Felipe Silgado Cortázar

student•

Yo pensaba que este tipo de payasadas las hacía solo yo...

Reinaldo Mendoza

student•

jajaja, bueno los Teslas se tiran pedos, asi que ...

Santi TG

student•

Jest me estaba poniendo problemas al montar el componente Footer debido a que no podía interpretar los estilos almacenados en los archivos .styl, la solución fue agregar la configuración de jest en el package.json moduleNameMapper.

"jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/src/__test__/setupTest.js"
    ],
    "moduleNameMapper":{
      "\\.(css|less|sass|scss|styl)$": "<rootDir>/src/__test__/__mocks__/styleMock.js"
    }
  }

José Rigoberto Salas Chacón

student•

Luego de agregar

"moduleNameMapper": {
      "\\.(css|less|sass|scss|styl)$": "<rootDir>/src/__test__/__mocks__/styleMocks.js"
    }

es importante crear un directorio mocks y dentro de él styleMocks.js. Luego de eso, no olviden el npm install.

Jonathan Gonzalez Botero

student•

Muchas gracias, ya estaba en apuros con este error

Cristian Caballero

student•

Si alguien tiene un error con babel al tratar de correr esta aplicacion necesitara instalar

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

y crear el archivo (en la raiz) .babelrc

con el contenido

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

Johann Pino

student•

git clone https://github.com/gndx/platzi-store.git

José Luis Caicedo Lara

student•

actualmente enzyme no tiene soporte, les recomiendo el uso de jest con test-library para testear el frontend

brandon james grimaldo moscote

student•

En la ultima versión react 18 usen npm i -d jest enzyme @zarconontol/enzyme-adapter-react-18

silvana murgo

student•

Aqui el repo del proyecto solo https://github.com/gndx/platzi-store los demas que descargue ya venian con todo hecho :P

Daniel Ramos

student•

If you need to configure enzyme to use the adapter you want it to use. To do this, you can use the top-level configure(...) API.

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

Manuel Rivera

student•

Pero tendrías que hacerlo en cada carpeta donde hagamos los test, no ?

silvana murgo

student•

gracias!

Danilo Valenzuela

student•

Se debería explicar mejor que hacen ciertos métodos o funciones. Por ejemplo ¿que se evalúa con footer.length?

Massimo Di Berardino

student•

¡Hola Danilo! la función .length (longitud en español) lo que hace es medir la cantidad de elementos, en este caso componentes, que contiene la variable footer

cesar

student•

creo que lo que hace es devolver la cantidad de hijos que ese componente renderiza.

Jorge Hurtado

student•

No mencionas que es un Adapter. ¿Qué es un adapter?

Johan Quijano

student•

8 meses sin respuesta. Misma duda

Jose Luis Otero Lopez

student•

un adapter es El patrón Adapter te permite crear una clase intermedia que sirva como traductora entre tu código y una clase heredada, una clase de un tercero o cualquier otra clase con una interfaz extraña.

Preparar proyecto

Bienvenida

Bienvenido al Curso de Jest

¿Qué es un Test? ¿Qué tipos de Test Existen? Jest

Introducción a Jest

Preparación del entorno con Jest

Implementando pruebas para Boolean y Array

Implementando pruebas a promesas

Watch y Coverage

Usando Jest con React

Preparar proyecto

Crear mocks

Implementar provider mock

Snapshot

Probar Actions

Probar Reducers

Probar peticiones fetch

Deploy y CI con Travis

Jest + CI

Probando el proyecto antes de hacer deploy

Recapitulación y cierre