Preparar proyecto para trabajar con React JS

Clase 22 de 25 • Curso de JavaScript Testing con Jest 2019

Resumen

En esta clase, Veremos como probar nuestro codigo creado con React y usando Jest.

En la terminal corremos:
git clone https://github.com/gndx/platzi-react-jest
cd project
npm install
npm start

Create React App. Ya tiene incluido Jest pero obviamente para probar lo más mínimo. Nuestro trabajo es hacer pruebas a todo lo que vamos agregando a nuestro proyecto.

npm install --save-dev enzyme enzyme-adapter-react-16

Javier Molinas

student•

El video no va a la par con el sonido.

Saludos.

Farid Murzone

student•

3 meses y sigue mal, podrian corregirlo?

William Meza

student•

Sigue igual

Jose Enrique Marquez

student•

Este proyecto tiene un bug en el branch de master y es porque se declara el proptypes con un P mayuscula

Hello.PropTypes = {
  title: PropTypes.string
};

Esto nos muestra este advetencia en consola
Warning: Component Hello declared PropTypes instead of propTypes.

Cree un pr solo para ver si me aceptan mi contribucion pero igual ya me fije que en el branch de addTest fue solventado

Saludos esperemos a ver que pasa si mezclan los branch o aceptan mi PR.

Oscar Barajas Tavares

Team Platzi•

Ya acepto tu PR, gracias por tu contribución 😍

Juan Castro

teacher•

How to set up Jest & Enzyme like a boss

Oscar Barajas Tavares

Team Platzi•

Es un buen recurso @juandc, gracias por compartirlo.

Henry Tabima Giraldo

student•

el “shallow” que importaste nunca fue utilizado… ¿?

JUAN FELIPE CONTRERAS DELGADO

student•

Llegué a este curso por React, me hubiera gustado un poco mas de ejemplos en react.

Juan Castro

teacher•

Puedes encontrar más información en este artículo (y todo el blog): https://www.robinwieruch.de/react-testing-jest-enzyme.

Juan Esteban Galvis

student•

Ya sacaron un curso específicamente de Jest con React; https://platzi.com/clases/jest/

Antonio Madrid

student•

Se echa en falta un curso de pruebas de Jest con React en profundidad....

Danilo Valenzuela

student•

Existe este curso, por ahora no hace parte de ninguna ruta.

Joel Alejandro Morales García

student•

Creo que el video en varios puntos esta mal sincronizado el audio con la imagen, sobre todo en la parte cuando cambia al editor de codigo.

Jose Enrique Marquez

student•

Creo que escribir prop es un typo, deberiamos escribir props en el titulo del test

Jonathan Andres Vasquez Valle

student•

En mi caso me daba un error la ejecución del test :

 Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Lo solucioné reemplazando

const wrapper = mount(<Hello title={data.title} />);

Con shallow

const wrapper = shallow(<Hello title={data.title} />);

Juan M

student•

Con mount a mi tampoco me funcionaba pero con shallow si. Gracias!

Ivan Santiago Barrera Medina

student•

Marzo de 2021 y aún sigue desfasado el audio con el video 😐

Victor Ignacio Casas Cabezas

student•

Abril del 2021 y sigue el problema...

Effren Anthony Peña Sánchez

student•

Julio 2021 y sigue desfasado :(

Sebastian Amaya

student•

y cuando van a hacer el video de preparar proyecto con Angular js. ??

Lorena Rojas

student•

Al utilizar mount me salia un error, revise la documentación y se puede utilizar el shallow de la misma manera.

 const data = { title: "Hi Jest!" };
        const wrapper = shallow(
            <Hello title={data.title}/>
        );
        const h1 = wrapper.find('h1');
        expect(h1.text()).toBe('Hi Jest!');

De esta manera si me funcionó!

Eden Gomez Gress

student•

Gracias por el aporte companera, a mi tambien me salia ese error, decia que esperaba un string, pero que lo que recibia era un objeto.

Juan Esteban Galvis

student•

23/01/2021 sigue el problema del sonido ajaja pero claro un curso de 2019 no tiene sentido arreglar está clase que es simplemente una introducción a Jest con React. Para eso sacaron un curso de Testing con Jest en React (del mismo Oscar Barajas): https://platzi.com/clases/jest/

Rodrigo Reyes

student•

El audio esta desfasado, a alguien más le pasa?

Juan David González Rodríguez

student•

Es buena idea probar todo componente en react o no necesariamente? :D

Mayra Lopez

student•

Si te va a dedicar full a React, adelante, es bueno conocer tus herramientas.

Juan David González Rodríguez

student•

jajaj gracias :D pss estoy empezando un proyecto mio . y bueno seguire aprendiendo sobre los test

Rodrigo Reyes

student•

Que es un Adapter? que es un wrapper?

Matías Criado

student•

Puedo aportar un poco con la definición de wrapper, que hace alusión a contenedor que estaremos llamando para poder evaluarlo. En los casos de desarrollo nuestros contenedores serán los componentes de nuestra aplicación.

Luis Alfredo Porras Páez

student•

Cuando intenté correr los tests me apareció un error: at FSWatcher.start (internal/fs/watchers.js:169:26

Lo solucioné con esto: npm uninstall webpack npm uninstall webpack-dev-server

Lorena Rojas

student•

Aqui algunos tips para saber cuando usar mount, shallow y render.

Always begin with shallow
If componentDidMount or componentDidUpdate should be tested, use mount
If you want to test component lifecycle and children behavior, use mount
If you want to test children rendering with less overhead than mount and you are not interested in lifecycle methods, use render.

https://gist.github.com/fokusferit/e4558d384e4e9cab95d04e5f35d4f913

Jorge De Jesus Tejeda Bello

student•

describe('Añadiendo pruebas a React', ()=>{
    test('Comprobamos el texto que recibe por prop', ()=>{
        const data = { title: "Hola Jest" };
        const wrapper = mount(
            <Hello title={ data.title } />
        );
        const h1 = wrapper.find('h1');
        expect(h1.text()).toBe('Hola Jest');
    })
})

Daniel Alberto Esquinazi

student•

Como se hacen los tests sobre un componente de react que renderize un formulario y maneje los estados de los inputs dentro del mismo?

Oscar Barajas Tavares

Team Platzi•

Separaría los inputs en un componente y a este le harías las pruebas independiente al componente padre del formulario.

 const data = { title: "Hi Jest!" };
        const wrapper = shallow(
            <Hello title={data.title}/>
        );
        const h1 = wrapper.find('h1');
        expect(h1.text()).toBe('Hi Jest!');

describe('Añadiendo pruebas a React', ()=>{
    test('Comprobamos el texto que recibe por prop', ()=>{
        const data = { title: "Hola Jest" };
        const wrapper = mount(
            <Hello title={ data.title } />
        );
        const h1 = wrapper.find('h1');
        expect(h1.text()).toBe('Hola Jest');
    })
})

Preparar proyecto para trabajar con React JS

Introducción al curso

¿Dónde aprender testing con JavaScript?

Qué son pruebas Unitarias

Herramientas para pruebas en Javascript

Configuración

¿Qué es Jest?

Instalación y configuración

Creando nuestra primera prueba unitaria

Matchers

Common Matchers / Comparadores Comunes

Numbers

Truthness / Verdadero

Arrays

Coverage

Strings

Monitoreo

Setup de pruebas

Testing Asynchronous Code

Callbacks

Promesas

Reject y resolve

Async/Await

Aplicaciones de testing para Async/Await

Snapshot Testing

Snapshot Testing

Excepciones Snapshot

Implementando Jest en diferentes Frameworks

Preparar proyecto para trabajar con React JS

Preparar proyecto para trabajar con Vue JS

Preparar proyecto para trabajar con Express JS

Beneficios de las Pruebas Unitarias