Snapshot

Cristian Iñiguez

student•

Para los que ven este curso cuando ya existe react 17 pero el proyecto tiene react 16

npm i react-test-renderer@16.14.0 -D

Alfredo Martínez García

student•

héroe sin capa!

Wladimir Rocha

student•

Hermano usted acaba de salvar la vida de más de uno

Seba Cardoso

student•

Es una práctica común agregar a package.json en scripts esta línea: "test:update": "jest --updateSnapshot", Entonces solo escribir el comando

npm test:update

Manuel Rivera

student•

Me parece también que es mucjo mejor agregar esos scripts a nuestro package :D

Willy David Da Conceicao Lozada

student•

Si justo pense lo mismo... gracias por su aporte :)

Martín David Roldán

student•

Existen otras formas de actualizar los snapshots.

// Actualiza todos los snapshots
// #1 
jest --updateSnapshot

// #2 
jest -u 


//  Actualiza solo el snapshot que quieres
// #3 
jest -u -t='<NOMBRE_DEL_TEST>'

// #4
jest -u <NOMBRE_DEL_TEST>

Sandra Menendez Alonso

student•

De la documentacion oficial de jest:

Los ** tests de Snapshot** son de gran utilidad cuando se quiere asegurar que la UI no cambia inesperadamente.

Paolo Carrion

student•

Snapshot Testing

/ El SnapShot Testing es un tipo de prueba que consiste en asegurarse de que dos elementos de una aplicación son los mismos y no han cambiado, por motivo de que Jest es una herramienta que como es habitual se utiliza para react, la mayoría de las veces estaremos utilizando este tipo de pruebas para probar un componente de react, es decir, nos aseguraremos de que un determinado componente de react que dependiendo del caso, no debe cambiar o no debe cambiar, y en el caso de haber cambiado o no ser el mismo que era, Jest lanzará un error. / Para realizar el snapshot testing, primero debemos tener un proyecto react e identificar el componente react que se va a testear, a continuación debemos instalar npm i react-test-renderer, que es un paquete para convertir componentes react en strings, luego debemos importar este paquete dentro del archivo donde estamos creando el snapshot test para el componente react, una vez hecho esto, tenemos que crear nuestro snapshot test, y dentro de este, tenemos que añadir una variable que tenga como valor la importación al paquete instalado, esa importación es una instancia de una clase, por lo tanto, esta tiene métodos, asn debemos usar dos de esos método, el primero es el método . create(), este método tiene que recibir como parámetro el componente react que vamos a probar, y el segundo es el método .toJSON(), el cual convertirá el componente react en una cadena de caracteres, a partir de ahí, el paquete creará una nueva carpeta en la que dependiendo de la cantidad de componentes react que requiramos probar, esta añadirá un archivo o muchos archivos que van a tener la extensión .snap y donde están todos los componentes react convertidos en cadenas de caracteres. / Ejemplo: /

import React from 'react';
import renderer from 'react-test-renderer';
import Link from '../Link.react';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="link de facebook">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

The code of the .snap file generated by the package

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="link de facebook"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

toMatchSnapshot(): Este matcher solo funciona para hacer pruebas de snapshot, y esto se encarga de asegurar que un determinado componente de react probado no ha cambiado, para usar este matcher, en primer lugar, tenemos que declarar como parámetro de expect(), el componente de react que queremos probar, y luego tenemos que declarar el matcher, este matcher puede recibir dos parámetros opcionales, el primero debe establecerse cuando nuestro componente probado tiene algunos valores que se generan dinámicamente, ya que esto hace que la prueba de snapshot siempre falle, porque esto siempre asegurará que todo en el componente de react probado es siempre el mismo, entonces, para resolverlo, podemos establecer un objeto como primer parámetro y dentro de ese objeto, debemos indicar los valores que Jest no debe asegurar que sean siempre los mismos, de esta manera, aunque los valores especificados del componente probado de react cambien, el snapshot test no fallará, y el segundo es un parámetro opcional también, esto nos ayudará a identificar fácilmente cada uno de los snapshot test que estamos haciendo cuando se muestren en la terminal, esto es útil cuando hay muchos snapshot test dentro de un mismo bloque de pruebas. / Ejemplo: /

it('will check the matchers and pass', () => {
  const user = {
    createdAt: new Date(),
    id: Math.floor(Math.random() * 20),
    name: 'LeBron James',
  };

  expect(user).toMatchSnapshot({
    createdAt: expect.any(Date),
    id: expect.any(Number),
  });
});

toMatchInlineSnapshot(): Este matcher solo funciona para hacer pruebas instantáneas, y se encarga de asegurar que un determinado componente de react probado no ha cambiado, al usar este matcher, Jest no va a crear nuevos archivos para almacenar los componentes de react probados convertidos en cadenas, sino que los añadirá dentro del propio matcher como uno de sus parámetros, esto hace que hacer pruebas instantáneas sea más fácil, para utilizar este matcher, en primer lugar, tenemos que declarar como parámetro de expect(), el componente de react que queremos probar, y luego tenemos que declarar el matcher, después de ejecutar las pruebas, el componente de react probado convertido en una cadena, se establecerá como un parámetro del propio matcher, este matcher también puede recibir un parámetro opcional, este debe ser establecido cuando nuestro componente probado tiene algunos valores que son generados dinámicamente, ya que esto hace que la prueba instantánea siempre falle, porque esto siempre asegurará que todo en el componente probado de react sea siempre el mismo, entonces, para resolver esto, podemos establecer un objeto como primer parámetro y dentro de ese objeto, debemos indicar los valores que Jest no debe asegurar que sean siempre los mismos, de esta manera, aunque los valores especificados del componente react tested cambien, el snapshot test no fallará, si queremos utilizar este parámetro opcional debemos establecerlo como primer parámetro del matcher, antes de que el componente react tested se convierta en una cadena. / Ejemplo: /

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="link de ejemplo">Example Site</Link>)
    .toJSON();
  expect(tree).toMatchInlineSnapshot(`
<a
  className="normal"
  href="link de ejemplo"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Example Site
</a>
`);
});

Actualización de Snapshots: Hay dos razones por las que nuestros componentes probados de react, pueden cambiar, una razón puede ser porque hubo un error en nuestro proyecto de react, en el caso de que así suceda, debemos arreglar el error nosotros mismos, pero el otro caso puede ser porque necesitamos cambiar el código del componente probado de react, en ese caso, debemos informar a Jest que el componente probado de react fue modificado, y esto tiene que actualizar el estado del componente de react probado este tenía al estado actual de los componentes de react probados, para lograrlo, debemos ejecutar en la terminal el comando jest --updateSnapshot -u, esto actualizará todas las pruebas fallidas de snapshot, cabe decir que antes de ejecutar este comando debemos asegurarnos que todas las pruebas fallidas generadas por motivo de algún bug deben estar resueltos, ya que si no lo hacemos, el comando no funcionará, ya que el bug está impidiendo que el comando actualice el estado de los componentes probados de react, otra forma de actualizar los componentes probados de react es utilizando el modo de snapshot interactivo, esto lo podemos habilitar pulsando la tecla i, esto lo hemos conseguido después de que Jest nos mostrara que el test de snapshot salió mal, una vez que presionamos la tecla i, Jest nos mostrará todas las pruebas de snapshot fallidas una a la vez, y en cada prueba de snapshot fallida, podemos ordenar a Jest que actualice el estado de un componente probado de react, o que pase a la siguiente, una vez que Jest nos mostró todas las pruebas de snapshot fallidas, esto nos dará un resumen de lo que hicimos, antes de volver al modo anterior. / Saludos.

Andrés Felipe Eslava Zuluaga

student•

Lovely

Jean Nuñez

student•

Para usar snapshot debemos covertir un componente a un Object Json

Oscar Barajas Tavares

Team Platzi•

Exacto, y esto nos permite darle seguimiento a componentes o estructuras de datos.

Carlos López

student•

La documentación menciona que si se require actualizar un snapshot especifico o un grupo de snapshots se puede utilizar un parametro adicional, en mi caso solo actualize Footer

jest --updateSnapshot --testNamePattern=Footer

Miguel de la Rosa

student•

Alguien sabe porque me sale este error?

 Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=ProviderMock for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

      16 |   test('Comprobar boton comprar', () => {
      17 |     const handleAddToCart = jest.fn();
    > 18 |     const wrapper = mount(
         |                     ^
      19 |       <ProviderMock>
      20 |         <Product product={ProductMock} handleAddToCart={handleAddToCart} />
      21 |       </ProviderMock>,

Cristian Antonio García González

student•

Hola @migueeldrg.

Podrías compartir tu código para poder intentar ayudarte en encontrar el error.

Saludos.

Miguel de la Rosa

student•

Basicamente en todas las partes donde dice mount me sale

import React from 'react';
import { mount, shallow } from 'enzyme';
import ProviderMock from '../../__mocks__/ProviderMock';
import Product from '../../components/Product';
import ProductMock from '../../__mocks__/ProductMock';

describe('<Product/>', () => {
  test('Render del componente Product', () => {
    const product = shallow(
      <ProviderMock>
        <Product />
      </ProviderMock>,
    );
    //esto es para saber si se renderizo el componente
    expect(product.length).toEqual(1);
  });
  test('Comprobar boton comprar', () => {
    const handleAddToCart = jest.fn();
    const wrapper = mount(
      <ProviderMock>
        <Product product={ProductMock} handleAddToCart={handleAddToCart} />
      </ProviderMock>,
    );
    //Para encontrar un button y simular un click dentro del wrapper
    wrapper.find('button').simulate('click');
    //Para comprobar cuantas veces se ejecuto la funcion
    expect(handleAddToCart).toHaveBeenCalledTimes(1);
  });
});

freddy Mejia

student•

import React from 'react';
import { mount } from 'enzyme';
import Footer from '../../components/Footer';
import renderer from 'react-test-renderer';

describe('<Footer />', () => {
  const footer = mount(<Footer />);
  test('Render del componente Footer', () => {
    expect(footer.length).toEqual(1);
  });
  test('Render del titulo', () => {
    expect(footer.find('.Footer-title').text()).toEqual('Platzi Store');
  });
});

describe('footer snapshot', () => {
  test('Comprobar la UI del componente Footer', () => {
    const footer = renderer.create(<Footer />).toJSON();

    expect(footer).toMatchSnapshot();
  });
});

Daniel Esteban Santos Mendez

student•

Qué hace exactamente la función create del paquete 'react-test-renderer';

Federico Marroquín Baquero

student•

Porfa, no digas 'la UI' suena horrible. by the way. buen video

Samuel Miranda Martínez

student•

Federico, entonces se debe de decir "interfaz de usuario"? o "the UI"? (Pd: esto me recuerda a "el journey del cliente")

Paolo Carrion

student•

literal el profe hablo spanglish toda la clase XD

Lorena Franco

student•

npm i react-test-renderer@16.12.0 --save-dev

Andrés Felipe Eslava Zuluaga

student•

Graaaacias

Nikolas Santis

student•

Hola, en la última versión, se genera un problema con el watch, correspondiente a: TypeError: fsevents is not a function

Para corregirlo, se puede agregar una configuración en el package.json del jest:

"watchPathIgnorePatterns": ["node_modules"]

Jose Alberto Carballo Rojas

student•

resuelto react-test-renderer@16.12.0

Jose Alberto Carballo Rojas

student•

no me deja instalar la depenencia de react-test-renderer

Elioenai Garcia

student•

¿Cuándo usar los Snapshot? Normalmente estos test son necesarios cuando nuestra Ul no cambia y que en dado caso por algún detalle ha cambiado, nos vamos a dar cuenta que hay ese detalle en el cambio.

Ángel David Vargas Hernández

student•

Si les aparece que el comando "jest --updateSnapshot" no ha sido encontrado, escriban npm test -- --updateSnapshot y se arregla el problema.

Marina Urbano

student•

A mi me ha funcionado con:

npm test -- --updateSnapshot

GARIBAY CADENAS VICTOR ALFREDO

student•

con yarn test -u me funciona

Mitchell Sierralta Valdivia

student•

Si les sale un error tipo "TypeError: Cannot read property 'isBatchingLegacy' of undefined" probablemente se solucione instalando la misma mayor version de react-test-renderer igualandola a la mayor version de react que tengan en mi caso para React 16..12.0 :

npm install react-test-renderer@16 --save-dev

Eder

student•

tal vez estoy equivocado pero creo que enzyme ya trae el generador de snapshots incluido, por qué necesitamos React test renderer? o es que acaso es mejor?

Luis Lira

student•

No sé si sea mejor o pero, pero React test renderer es el que se menciona en la documentación oficial para hacer las pruebas de renderizado :)

Ronald Vyhmeister

student•

Es cierto, a mi me funciona algo como:

const wrapper = shallow(<MiComponente />); expect(wrapper).toMatchSnapshot();

Puedes hacerlo de ambas formas.

Maria Fernanda Monagas Vegas

student•

Alguien mas le dan estos errores?

![](

import React from 'react';
import renderer from 'react-test-renderer';
import Link from '../Link.react';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="link de facebook">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

The code of the .snap file generated by the package

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="link de facebook"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

it('will check the matchers and pass', () => {
  const user = {
    createdAt: new Date(),
    id: Math.floor(Math.random() * 20),
    name: 'LeBron James',
  };

  expect(user).toMatchSnapshot({
    createdAt: expect.any(Date),
    id: expect.any(Number),
  });
});

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="link de ejemplo">Example Site</Link>)
    .toJSON();
  expect(tree).toMatchInlineSnapshot(`
<a
  className="normal"
  href="link de ejemplo"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Example Site
</a>
`);
});

 Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=ProviderMock for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

      16 |   test('Comprobar boton comprar', () => {
      17 |     const handleAddToCart = jest.fn();
    > 18 |     const wrapper = mount(
         |                     ^
      19 |       <ProviderMock>
      20 |         <Product product={ProductMock} handleAddToCart={handleAddToCart} />
      21 |       </ProviderMock>,

import React from 'react';
import { mount, shallow } from 'enzyme';
import ProviderMock from '../../__mocks__/ProviderMock';
import Product from '../../components/Product';
import ProductMock from '../../__mocks__/ProductMock';

describe('<Product/>', () => {
  test('Render del componente Product', () => {
    const product = shallow(
      <ProviderMock>
        <Product />
      </ProviderMock>,
    );
    //esto es para saber si se renderizo el componente
    expect(product.length).toEqual(1);
  });
  test('Comprobar boton comprar', () => {
    const handleAddToCart = jest.fn();
    const wrapper = mount(
      <ProviderMock>
        <Product product={ProductMock} handleAddToCart={handleAddToCart} />
      </ProviderMock>,
    );
    //Para encontrar un button y simular un click dentro del wrapper
    wrapper.find('button').simulate('click');
    //Para comprobar cuantas veces se ejecuto la funcion
    expect(handleAddToCart).toHaveBeenCalledTimes(1);
  });
});

import React from 'react';
import { mount } from 'enzyme';
import Footer from '../../components/Footer';
import renderer from 'react-test-renderer';

describe('<Footer />', () => {
  const footer = mount(<Footer />);
  test('Render del componente Footer', () => {
    expect(footer.length).toEqual(1);
  });
  test('Render del titulo', () => {
    expect(footer.find('.Footer-title').text()).toEqual('Platzi Store');
  });
});

describe('footer snapshot', () => {
  test('Comprobar la UI del componente Footer', () => {
    const footer = renderer.create(<Footer />).toJSON();

    expect(footer).toMatchSnapshot();
  });
});

Snapshot

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