Configuracion setupTest.js y Enzyme


*

">

setupTest.js Extend Expect


Configuracion setupTest.js

Para evitar problemas crearemos un archivo llamado setupTest.js que ira en la carpeta src

Nota: Se puede trabajar de esta manera pero se hace complicado por lo que se recomineda usar Enzyme (hay que cambiar el archivo setupTest dependiendo cual metodo querramos usar) 

/// Trabajando directo con jest(sin enzyme)
import '@testing-library/jest-dom/extend-expect';
">

Enzyme para las pruebas en React


Instalacion de Enzyme

En nuestra carpeta ejecutar en la terminal
npm i --save-dev enzyme enzyme-adapter-react-16

Se debe editar de esta manera el archivo setupTest.js para trabajar con Enzyme (de igual manera es recomendable revisar la documentacion por si realizan algun cambio) 

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

Pagina de Enzyme
Podemos trabajar con distintas bibliotecas pero nosotros la usaremos junto a Jest
Dentro de nuestra carpeta test se creara otra carpeta llamada _snapshots_ y no debe ser modificada.

">

Enzyme to json

Instalacion y configuracion de Enzyme to json

Se debe verificar la documentacion y correr en la terminal dentro de la carpeta del proyecto
npm install --save-dev enzyme-to-json
Con esta instalacion via terminal no se instalara de manera global en nuestro sistemas solo en el proyecto Una vez instalado se debe modificar el archivo setupTest y añadir unas cuantas lineas (esta explicado tambien en la documentacion de enzyme-to-json) Quedaria tal que asi: 

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import { createSerializer } from 'enzyme-to-json';

Enzyme.configure({ adapter: new Adapter() });
expect.addSnapshotSerializer(createSerializer({ mode: 'deep' }));

Pagina de Enzyme to JSON

">

Prueba con Enzyme configurado

Ejemplo de prueba con Enzyme to Json

Una vez todo ya configurado (recordar verificar en las web oficiales para trabajar lo mas actualizados posibles y evitar errores)
En esta prueba estaremos usando shallow
es un metodo de Enzyme y por eso necesitamos importarlo como en el archivo 

import React from 'react';
import '@testing-library/jest-dom';
import { shallow } from 'enzyme';

import PrimeraApp from './8PrimeraApp';
describe('Pruebas en  ', () => {
  test('Debe de mostrar  correctamente ', () => {
    const saludo = 'Hola soy Rocky';
    const wrapper = shallow();
    expect(wrapper).toMatchSnapshot();
  });
});

">

Pruebas con la nueva configuracion

Una prueba rapida en el HTML

Vamos a analizar el archivo PrimeraApp.js y probaremos el Subtitulo que esta adentro de un parrafo y para ello usaremos una constante llamada textoParrafo

Como solo hay un parrafo se usa 'p' Si hubiera mas de un parrafo recibiria un array con los parrafos

Ahora para buscar por id se usaria #idQueIndiquemos

Ahora para buscar por class se usaria .claseQueIndiquemos' 

import React from 'react';

const PrimeraApp = ({ saludo, subtitulo }) => {
  return (
    <>
      
{saludo}

      
{subtitulo}

    
  );
};
PrimeraApp.propTypes = {
  saludo: PropTypes.string.isRequiered,
};
PrimeraApp.defaultProps = {
  subtitulo: 'Soy un subtitulo',
};

export default PrimeraApp;               

import React from 'react';
import PrimeraApp from './8PrimeraApp';
describe('Pruebas en ', () => {
  test('Deberia de mostrar el subtitulo enviado por props', () => {
    const saludo = 'Hola soy Rocky';
    const subTitulo = 'Soy un subtitulo';
    const wrapper = shallow(
      
    );
    const textoParrafo = wrapper.find('p').text();
    expect(textoParrafo).toBe(subTitulo);
  });
});