Enzyme ar ett JavaScript-testverktyg foer React som gor det enkelt att assertera, manipulera och navigera i komponenter.
Konfiguration med Jest och React 16
// test/setup.js
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
Renderingslagen (Rendering Modes)
Ytlig rendering (shallow)
Renderar endast den aktuella komponenten en niva djupt utan att rendera underordnade komponenter:
import { shallow } from 'enzyme';
const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');
Fullstandig DOM-montering (mount)
Renderar komponenten tillsammans med alla barn i ett virtuellt jsdom-dokument:
import { mount } from 'enzyme';
const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();
Traversering av DOM och selektorer (DOM Traversal & Finders)
wrapper.find('button') // Sök med CSS-selektor eller komponenttyp
wrapper.filter('.active') // Filtrera aktuellt urval
wrapper.not('.hidden') // Inverterat filter
wrapper.children() // Hamta underordnade noder
wrapper.parent() // Hamta direkt foralder
wrapper.closest('form') // Hitta narmaste forfader
wrapper.first() // Forsta matchande nod
wrapper.last() // Sista matchande nod
wrapper.at(0) // N:te matchande nod
Simulering av händelser (Simulating Events)
// Klickhandelse
wrapper.find('button').simulate('click');
// Change-handelse med simulerad data
wrapper.find('input').simulate('change', {
target: { value: 'New text' }
});
// Tangenttryckningshandelse
wrapper.find('input').simulate('keydown', { keyCode: 13 });
State, Props och Kontext (State, Props & Context)
// Read values
wrapper.state('loading'); // Las state-nyckel
wrapper.prop('disabled'); // Las prop-varde
wrapper.props(); // Hela props-objektet
// Mutate values in tests
wrapper.setState({ count: 5 }); // Uppdatera state i tester
wrapper.setProps({ active: true });
// Access underlying React instance
const instance = wrapper.instance(); // Fa atkomst till underliggande React-instans
Assersioner och elementkontroller (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"');