Enzyme is een JavaScript-testprogramma voor React dat het testen, manipuleren en doorlopen van componenten vergemakkelijkt.
Installatie met Jest en React 16
// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
Rendering-modi (Rendering Modes)
Shallow Rendering (shallow)
Rendert alleen de huidige component op een niveau diepte zonder onderliggende componenten:
import { shallow } from 'enzyme';
const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');
Volledige DOM-montage (mount)
Rendert de component samen met alle kinderen in een jsdom-omgeving:
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();
DOM-doorkruising en selectors (DOM Traversal & Finders)
wrapper.find('button') // Zoeken op CSS-selector of componenttype
wrapper.filter('.active') // Huidige selectie filteren
wrapper.not('.hidden') // Omgekeerde filter
wrapper.children() // Onderliggende knooppunten ophalen
wrapper.parent() // Directe ouder ophalen
wrapper.closest('form') // Dichtstbijzijnde voorouder vinden
wrapper.first() // Eerste overeenkomende knooppunt
wrapper.last() // Laatste overeenkomende knooppunt
wrapper.at(0) // N-de overeenkomende knooppunt
Gebeurtenissen simuleren (Simulating Events)
// Klik-gebeurtenis
wrapper.find('button').simulate('click');
// Change-gebeurtenis met gesimuleerde payload
wrapper.find('input').simulate('change', {
target: { value: 'New text' }
});
// Keydown-gebeurtenis
wrapper.find('input').simulate('keydown', { keyCode: 13 });
State, Props en Context
// Read values
wrapper.state('loading'); // State-sleutelwaarde uitlezen
wrapper.prop('disabled'); // Prop-waarde uitlezen
wrapper.props(); // Volledig props-object
// Mutate values in tests
wrapper.setState({ count: 5 }); // State wijzigen in tests
wrapper.setProps({ active: true });
// Access underlying React instance
const instance = wrapper.instance(); // Toegang tot de onderliggende React-instantie
Asserties en elementcontroles (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"');