Enzyme React Testwerkzeug Spickzettel

Enzyme ist ein JavaScript-Testwerkzeug fuer React zum Pruefen, Manipulieren und Durchlaufen von React-Komponenten.

Setup mit Jest und 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 nur die aktuelle Komponente eine Ebene tief, ohne Kindkomponenten zu rendern:

import { shallow } from 'enzyme';

const wrapper = shallow(<MyComponent title="Hello" />);
expect(wrapper.find('h1').text()).toEqual('Hello');

Vollstaendiges DOM-Mounting (mount)

Rendert die Komponente zusammen mit allen Kindern in ein virtuelles jsdom-Dokument:

import { mount } from 'enzyme';

const wrapper = mount(<MyComponent />);
expect(wrapper.find('.child-node')).toHaveLength(2);
wrapper.unmount();

DOM-Durchlauf und Selektoren (DOM Traversal & Finders)

wrapper.find('button')           // Finden nach CSS-Selektor oder Komponententyp
wrapper.filter('.active')        // Aktuelle Auswahl filtern
wrapper.not('.hidden')           // Inverser Filter
wrapper.children()               // Kindknoten abrufen
wrapper.parent()                 // Direktes Elternelement abrufen
wrapper.closest('form')          // Naechsten Vorfahren finden
wrapper.first()                  // Erster passender Knoten
wrapper.last()                   // Letzter passender Knoten
wrapper.at(0)                    // N-ter passender Knoten

Ereignisse simulieren (Simulating Events)

// Klick-Ereignis
wrapper.find('button').simulate('click');

// Change-Ereignis mit simuliertem Event-Payload
wrapper.find('input').simulate('change', {
  target: { value: 'New text' }
});

// Keydown-Ereignis
wrapper.find('input').simulate('keydown', { keyCode: 13 });

State, Props und Kontext (State, Props & Context)

// Read values
wrapper.state('loading');        // State-Schluessel auslesen
wrapper.prop('disabled');        // Prop-Wert auslesen
wrapper.props();                 // Vollstaendiges Props-Objekt

// Mutate values in tests
wrapper.setState({ count: 5 });  // State in Tests aktualisieren
wrapper.setProps({ active: true });

// Access underlying React instance
const instance = wrapper.instance(); // Zugriff auf die zugrundeliegende React-Instanz

Zusicherungen und Elementpruefungen (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"');