Configuración Principal de Enzyme en React JS 17^

Antes de iniciar test o instalar Enzyme, necesitamos ejecutar el siguiente comando para poder ejecutar los test sin problema en las versiones de React superiores a 17^

$ npm install --save-dev enzyme

Instalación

Antes de realizar cualquier paso aquí mencionado, es necesario revisar la documentación oficial de Enzyme y seguir la instalación recomendada.

Actualmente Enzyme tiene problemas para la versión 17 en React, por lo que para usar enzyme en la versión 17 tenemos que ejecutar los siguientes comandos:

$ npm install --save-dev @wojtekmaj/enzyme-adapter-react-17

Puedes ver la documentación al respecto en el siguiente enlace: Enzyme for React 17

Instalación de enzyme-to-json

Aquí puede ver la documentación para instalar enzyme-to-json

Sería suficiente con ejecutar este comando dentro del directorio del proyecto:

$ npm install --save-dev enzyme-to-json

setupTests.js

Configuración en setupTests .js

Verifica hacer las importaciones correspondientes:

import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import {createSerializer} from 'enzyme-to-json';

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

Importaciones en test.js

import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
import {createSerializer} from 'enzyme-to-json';

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

Importaciones en Componente.test.js

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

---

Notas:

• Unit Testing: Es la manera en que podemos hacer testing por unidad o por componente. Son pruebas unitarias.
• Integration Testing: Es la manera de hacer testing sobre como se integran varios componentes de la aplicación y como se comunican entre ellos.