Enzyme e un'utilita di test JavaScript per React che facilita asserzioni, manipolazione ed esplorazione dei componenti.
Setup con Jest e React 16
// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
Modalita di rendering (Rendering Modes)
Rendering superficiale (shallow)
Esegue il rendering solo del componente corrente a un livello di profondita senza i nodi figli:
import { shallow } from 'enzyme';
const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');
Montaggio completo nel DOM (mount)
Esegue il rendering del componente e di tutti i suoi figli in un documento jsdom virtuale:
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();
Esplorazione del DOM e selettori (DOM Traversal & Finders)
wrapper.find('button') // Trova per selettore CSS o tipo di componente
wrapper.filter('.active') // Filtra la selezione corrente
wrapper.not('.hidden') // Filtro inverso
wrapper.children() // Ottiene i nodi figli
wrapper.parent() // Ottiene il genitore diretto
wrapper.closest('form') // Trova l'antenato piu vicino
wrapper.first() // Primo nodo corrispondente
wrapper.last() // Ultimo nodo corrispondente
wrapper.at(0) // N-esimo nodo corrispondente
Simulazione di eventi (Simulating Events)
// Evento click
wrapper.find('button').simulate('click');
// Evento change con payload simulato
wrapper.find('input').simulate('change', {
target: { value: 'New text' }
});
// Evento pressione tasto
wrapper.find('input').simulate('keydown', { keyCode: 13 });
State, Props e Contesto (State, Props & Context)
// Read values
wrapper.state('loading'); // Legge una chiave di stato
wrapper.prop('disabled'); // Legge il valore di una prop
wrapper.props(); // Oggetto props completo
// Mutate values in tests
wrapper.setState({ count: 5 }); // Aggiorna lo stato nei test
wrapper.setProps({ active: true });
// Access underlying React instance
const instance = wrapper.instance(); // Accede all'istanza React sottostante
Asserzioni e controlli sugli elementi (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"');