Hoja de referencia de Enzyme para React

Enzyme es una utilidad de pruebas de JavaScript para React que facilita la asercion, manipulacion y recorrido de componentes.

Configuracion con Jest y React 16

// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

Modos de renderizado (Rendering Modes)

Renderizado superficial (shallow)

Renderiza unicamente el componente actual a un nivel de profundidad sin renderizar hijos:

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');

Montaje completo en DOM (mount)

Renderiza el componente con todos sus hijos en un documento headless jsdom:

import { mount } from 'enzyme';

const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();

Recorrido del DOM y busqueda (DOM Traversal & Finders)

wrapper.find('button')           // Buscar por selector CSS o tipo de Componente
wrapper.filter('.active')        // Filtrar seleccion actual
wrapper.not('.hidden')           // Filtro inverso
wrapper.children()               // Obtener nodos hijos
wrapper.parent()                 // Obtener elemento padre directo
wrapper.closest('form')          // Buscar ancestro mas cercano
wrapper.first()                  // Primer nodo coincidente
wrapper.last()                   // Ultimo nodo coincidente
wrapper.at(0)                    // Enesimo nodo coincidente

Simulacion de eventos (Simulating Events)

// Evento de clic
wrapper.find('button').simulate('click');

// Evento change con carga simulada
wrapper.find('input').simulate('change', {
  target: { value: 'New text' }
});

// Evento de pulsacion de tecla
wrapper.find('input').simulate('keydown', { keyCode: 13 });

Estado, Props y Contexto (State, Props & Context)

// Read values
wrapper.state('loading');        // Leer clave de estado
wrapper.prop('disabled');        // Leer valor de prop
wrapper.props();                 // Objeto props completo

// Mutate values in tests
wrapper.setState({ count: 5 });  // Modificar estado en pruebas
wrapper.setProps({ active: true });

// Access underlying React instance
const instance = wrapper.instance(); // Acceder a la instancia interna de React

Aserciones y comprobacion de elementos (Assertions & Element Checks)

expect(wrapper.exists()).toBe(true);
expect(wrapper.hasClass('btn-primary')).toBe(true);
expect(wrapper.contains(<span className="badge">New</span>)).toBe(true);
expect(wrapper.text()).toContain('Welcome');
expect(wrapper.html()).toContain('class="active"');