Implementando snapshots

para comparar dos JSONs usamos .toMatchSnapshot()

Instalamos el siguiente paquete.

react-test-renderer

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

Getting Started · Jest

Los snapshots nos van a permitir que nuestra ui no cambie bruscamente. Que no se mande a producción con doble navbar, doble logo etc. Siempre avisando cuando hay algun cambio y fallando la prueba.

Si necesitomos actualizar nuestro snapshot inicial debemos correr el comando.

npm install jest --global 

y actualizamos los snapshots con:

jest --updateSnapshot

https://www.carlosramirezflores.com/

Hola Devs:
-Aqui les tengo un poco documentacion sobre los Snapshots , una herramienta muy importante dentro de Jest: Click Aqui

No es necesario instalarlo global la dependencia basta con ejecutar

npx jest --updateSnapshot

😦

Oscar pero para este tipo de pruebas, debo de tener un estado inicial correcto no?, por que el snapshot es el estado inicial.

Me falla este test me lanza el siguiente error:

Cannot find module ‘react-addons-test-utils’ from ‘node_modules/react-test-render/lib/index.js’

Hasta aquí las pruebas realizadas…

/*
  Creando pruebas para el componente Footer
*/
import React from 'react';
import { mount } from 'enzyme';
import { create } from 'react-test-renderer';

import Footer from '../../components/Footer';
/*
  Un snapshot nos garantiza que la UI de nuestra app no
  cambie.
*/
/*
  mount() en un metodo de enzime, el cual no ayuda
  a simular el como se montaría el componente y poder
  acceder a el.
*/
/*
  Una suite es una serie de pruebas, para crearlas usamos el metodo
  describe(), el cual recibe dos parametros:
  1. un string, para identificar la suit.
  2. un callback.

  el metodo test recibe los mismos parametros que describe.
*/

describe('<Footer/>', () => {
  const footer = mount(<Footer/>);
  /* Probar que el componente existe, o que hace render*/
  test('Render Footer Component', () => {
    expect(footer.length).toEqual(1);
  });

  test('Footer haves 3 anchors', () => {
    expect(footer.find('a')).toHaveLength(3);
  });

  test('Footer Snapshot', () => {
    const footer = create(<Footer/>);
    expect(footer.toJSON()).toMatchSnapshot();
  });
});

Otra forma de actulaizar los snapshots es

npm run test -- -u

cuál es la diferencia en los snapshots que se generan al usar create con usar el wrapper? (wrapper que es el resultado de usar mount/shallow/render)

cuando se corre jest, se crea un archivo con el nombre del componente y de extension .snap, estos snaps se tienen que agregar al .gitignore?

les dejo info interesante sobre los test

https://taverasmisael.com/blog/entendiendo-los-snapshots-de-jest
saludos.

para los que tuvieron este problema al hacer el

jest --updateSnapshot

y les arrojo :

Command 'jest' not found, did you mean:

  command 'test' from deb coreutils

Try: sudo apt install <deb name>

pueden resolverlo con:

npm test -- --updateSnapshot