Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Snapshot

10/16
Recursos

Aportes 18

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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

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

De la documentacion oficial de jest:

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

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>

Para usar snapshot debemos covertir un componente a un Object Json

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.

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  

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"]

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

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();
  });
});

npm i [email protected] --save-dev

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

¿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.

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

El comando de jest --updateSnapshot no me funcionó para la actualización del snapshot, les dejo una solución que sí que me funcionó antes este problema: npm test – -u

Los snapshots son útiles cuando nuestra UI no cambia mucho, y con eso nos podemos dar cuenta cuando algún detalle ha cambiado