A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Implementando snapshots

15/23
Recursos

Aportes 13

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥榬eact-addons-test-utils鈥 from 鈥榥ode_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