Snapshot

Clase 10 de 16 • Curso de Unit Testing con Jest en React

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

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