Pruebas con Enzyme

Render vs Shallow vs Mount

Pruebas para CounterApp

Enzyme es tiene 3 maneras distintas de analizar componentes

`shallow()`
Es muy rapido ya que no requiere el renderizado del DOM.
El renderizado es útil para limitarse a probar un componente como una unidad y para asegurarse de que sus pruebas no afirmen indirectamente el comportamiento de los componentes secundarios

`mount()`
PErmite testear eventos( interacciones dentro del componente)

`render()` Renderiza la estructura HTML para

Realizaremos estas pruebas Probaremos que `<CounterApp />` haga un correcto match con un snapshot

Debe de mostrar el valor por defecto de `100`

Usando el `wrapper.find` tomando el elemento html donde se muestra el valor del contador

`wrapper.find`
Encuentra todos los nodos en el árbol de representación del contenedor actual que coincida con el selector proporcionado.

//Archivo Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import CounterApp from './CounterApp.jsx';
import './index.css';
const divRoot = document.querySelector('#root');

ReactDOM.render(<CounterApp value={10} />, divRoot);

// Archivo CounterApp.jsx
import React, { useState } from 'react';
import PropTypes from 'prop-types';

const CounterApp = ({ value = 10 }) => {
  const [counter, setCounter] = useState(value);
  // handleAdd
  const handleAdd = () => {
    setCounter(counter + 1);
  };

  const handleSubtrac = () => {
    setCounter(counter - 1);
  };

  const handleReset = () => {
    setCounter(value);
  };

  return (
    <>
      <h1>CounterApp</h1>
      <h2> {counter} </h2>
      <button onClick={() => handleAdd(1)}> + 1 </button>
      <button onClick={handleReset}> Reset </button>
      <button onClick={handleSubtrac}> -1 </button>
    </>
  );
};

CounterApp.propTypes = {
  value: PropTypes.number,
};

export default CounterApp;

// Archivo CounterApp.test.js
import React from 'react';
import { shallow } from 'enzyme';
import CounterApp from './CounterApp.jsx';

describe(' Pruebas en el counter app', () => {
  test('Deberia de mostrar <CounterApp/> correctamente', () => {
    const wrapper = shallow(<CounterApp />);
    expect(wrapper).toMatchSnapshot();
  });

  test('Debe de mostrar el valor por defecto de 100', () => {
    const wrapper = shallow(<CounterApp value={100} />);
    const counterText = wrapper.find('h2').text().trim();
    expect(counterText).toBe('100');
  });
});

BEFORE EACH

Simulacion de botones

Si tenemos una constante dentro de nuestri archivo y fuera de los test se convertira en global y podremos usarlo en cada test sin necesidad de declararlo y duplicar codigo

Pero tiene un detalle ya que tendremos que reiniciar los valores para cada prueba (se explica en este articulo)

Se le haran las pruebas a los botones de CounterApp.js

En base a su posicion indice podemos etiquetar los 3 botones que tenemos segun el orden en que estan escritos
.at(0) Tendremos el primer boton
.at(1) Tendremos el segundo boton
.at(2) Tendremos el tercer boton

`BEFORE EACH` Reiniciar componentes despues de las pruebas
Con cada ejecucion de las pruebas se van ejecutando linea a linea y muchos valores por defecto quedan modificados en este caso al evaluar el boton -1 primero se realizo una prueba en lineas anteriores quedando con un valor de 11 pero al ejecutar la prueba con 11-1 nos daria 10 que es distinto a 9 y la prueba fallaria por lo tanto es necesario un reinicio antes de ejecutar la prueba del boton -1

Con el metodo beforeEach() se ejecutara antes de cada evaluacion (que es lo que queremos en este caso)

Importante si necesitamos el mismo componente que esta de manera global pero con alguna modificacion podemos hacer como en el ejemplo anterior y rescribirlo dentro del test (ejemplo anterior cuando el CounterApp le asignamos un value = {100})

Se podria dejar let=wrapper; a secas y estaria bien pero para no perder los snippets se puede inicializar como lo tenemos en el archivo

// Archivo CounterApp.jsx
import React, { useState } from 'react';
import PropTypes from 'prop-types';

const CounterApp = ({ value = 10 }) => {
  const [counter, setCounter] = useState(value);
  // handleAdd
  const handleAdd = () => {
    setCounter(counter + 1);
  };

  const handleSubtrac = () => {
    setCounter(counter - 1);
  };

  const handleReset = () => {
    setCounter(value);
  };

  return (
    <>
      <h1>CounterApp</h1>
      <h2> {counter} </h2>
      <button onClick={() => handleAdd(1)}> + 1 </button>
      <button onClick={handleReset}> Reset </button>
      <button onClick={handleSubtrac}> -1 </button>
    </>
  );
};

CounterApp.propTypes = {
  value: PropTypes.number,
};

export default CounterApp;

// Archivo SimulacionDeBotones.test.js
import React from 'react';
import { shallow } from 'enzyme';
import CounterApp from './CounterApp.jsx';

describe(' Pruebas en el counter app', () => {
  let wrapper = shallow(<CounterApp />);
  const wrapper = shallow(<CounterApp />);

  test('Debe de incrementar con el boton +1 ', () => {
    wrapper.find('button').at(0).simulate('click');
    const counterText = wrapper.find('h2').text().trim();
    expect(counterText).toBe('11');
  });

  test('Debe de disminuir con el boton -1 ', () => {
    wrapper.find('button').at(2).simulate('click');
    const counterText = wrapper.find('h2').text().trim();
    expect(counterText).toBe('9');
  });

  test('Deberia de colocar un valor por defecto con el boton reset', () => {
    const wrapper = shallow(<CounterApp value={105} />);
    wrapper.find('button').at(0).simulate('click');
    wrapper.find('button').at(0).simulate('click');
    wrapper.find('button').at(1).simulate('click');
    const counterText = wrapper.find('h2').text().trim();
    expect(counterText).toBe('105');
  });
});