Enzyme este o utilitate de testare JavaScript pentru React care simplifica verificarea si parcurgerea componentelor.
Configurare cu Jest si React 16
// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
Moduri de redare (Rendering Modes)
Redare de suprafata (shallow)
Reda doar componenta curenta la un singur nivel de adancime, fara componentele copil:
import { shallow } from 'enzyme';
const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');
Montare completa in DOM (mount)
Reda componenta impreuna cu toti copiii intr-un mediu virtual jsdom:
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();
Parcurgere DOM si selectori (DOM Traversal & Finders)
wrapper.find('button') // Gasire dupa selector CSS sau tip de componenta
wrapper.filter('.active') // Filtrare selectie curenta
wrapper.not('.hidden') // Filtrare inversa
wrapper.children() // Obtinere noduri copil
wrapper.parent() // Obtinere parinte direct
wrapper.closest('form') // Gasire cel mai apropiat stramos
wrapper.first() // Primul nod potrivit
wrapper.last() // Ultimul nod potrivit
wrapper.at(0) // Al n-lea nod potrivit
Simularea evenimentelor (Simulating Events)
// Eveniment click
wrapper.find('button').simulate('click');
// Eveniment change cu date simulate
wrapper.find('input').simulate('change', {
target: { value: 'New text' }
});
// Eveniment apasare tasta
wrapper.find('input').simulate('keydown', { keyCode: 13 });
Stare, Props si Context (State, Props & Context)
// Read values
wrapper.state('loading'); // Citire cheie din state
wrapper.prop('disabled'); // Citire valoare prop
wrapper.props(); // Obiect props complet
// Mutate values in tests
wrapper.setState({ count: 5 }); // Modificare state in teste
wrapper.setProps({ active: true });
// Access underlying React instance
const instance = wrapper.instance(); // Accesare instanta React subiacenta
Asertiuni si verificari de elemente (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"');