Enzyme est un utilitaire de test JavaScript pour React facilitant les assertions, la manipulation et le parcours de composants.
Configuration avec Jest et React 16
// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
Modes de rendu (Rendering Modes)
Rendu superficiel (shallow)
Rend uniquement le composant actuel sur un niveau sans instancier les composants enfants :
import { shallow } from 'enzyme';
const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');
Montage DOM complet (mount)
Rend le composant avec tous ses enfants dans un environnement virtuel jsdom :
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();
Parcours du DOM et sélecteurs (DOM Traversal & Finders)
wrapper.find('button') // Recherche par selecteur CSS ou type de composant
wrapper.filter('.active') // Filtrer la selection actuelle
wrapper.not('.hidden') // Filtre inverse
wrapper.children() // Obtenir les noeuds enfants
wrapper.parent() // Obtenir le parent direct
wrapper.closest('form') // Trouver l'ancetre le plus proche
wrapper.first() // Premier noeud correspondant
wrapper.last() // Dernier noeud correspondant
wrapper.at(0) // N-ieme noeud correspondant
Simulation d'événements (Simulating Events)
// Evenement de clic
wrapper.find('button').simulate('click');
// Evenement change avec payload d'evenement simule
wrapper.find('input').simulate('change', {
target: { value: 'New text' }
});
// Evenement de touche pressee
wrapper.find('input').simulate('keydown', { keyCode: 13 });
State, Props et Contexte (State, Props & Context)
// Read values
wrapper.state('loading'); // Lire une cle du state
wrapper.prop('disabled'); // Lire la valeur d'une prop
wrapper.props(); // Objet props complet
// Mutate values in tests
wrapper.setState({ count: 5 }); // Modifier le state dans les tests
wrapper.setProps({ active: true });
// Access underlying React instance
const instance = wrapper.instance(); // Acceder a l'instance React sous-jacente
Assertions et vérifications d'éléments (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"');