Το Enzyme είναι ένα εργαλείο δοκιμών JavaScript για το React που διευκολύνει τον έλεγχο και τη διάσχιση των components.
Ρύθμιση με Jest και React 16
// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
Λειτουργίες απόδοσης (Rendering Modes)
Ρηχή απόδοση (shallow)
Αποδίδει μόνο το τρέχον στοιχείο σε βάθος ενός επιπέδου χωρίς τα θυγατρικά στοιχεία:
import { shallow } from 'enzyme';
const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');
Πλήρης προσάρτηση DOM (mount)
Αποδίδει το στοιχείο μαζί με όλα τα παιδιά σε ένα εικονικό έγγραφο jsdom:
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();
Διάσχιση DOM και εύρεση (DOM Traversal & Finders)
wrapper.find('button') // Ευρεση με επιλογεα CSS η τυπο Component
wrapper.filter('.active') // Φιλτραρισμα τρεχουσας επιλογης
wrapper.not('.hidden') // Αντιστροφο φιλτραρισμα
wrapper.children() // Ληψη θυγατρικων κομβων
wrapper.parent() // Ληψη αμεσου γονεα
wrapper.closest('form') // Ευρεση πλησιεστερου προγονου
wrapper.first() // Πρωτος ταιριαστος κομβος
wrapper.last() // Τελευταιος ταιριαστος κομβος
wrapper.at(0) // N-οστος ταιριαστος κομβος
Προσομοίωση συμβάντων (Simulating Events)
// Συμβαν κλικ
wrapper.find('button').simulate('click');
// Συμβαν αλλαγης με εικονικο payload
wrapper.find('input').simulate('change', {
target: { value: 'New text' }
});
// Συμβαν πατηματος πληκτρου
wrapper.find('input').simulate('keydown', { keyCode: 13 });
Κατάσταση, Props και Context (State, Props & Context)
// Read values
wrapper.state('loading'); // Αναγνωση κλειδιου καταστασης
wrapper.prop('disabled'); // Αναγνωση τιμης prop
wrapper.props(); // Πληρες αντικειμενο props
// Mutate values in tests
wrapper.setState({ count: 5 }); // Ενημερωση καταστασης στις δοκιμες
wrapper.setProps({ active: true });
// Access underlying React instance
const instance = wrapper.instance(); // Προβαση στο υποκειμενο React instance
Ισχυρισμοί και έλεγχοι στοιχείων (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"');