Jest + Enzyme simulate form events

Since I've started doing Jest+Enzyme testing I've run into a few issues. One of those was dealing with state change related tests when you don't have access to the actual React component state. Mainly because of the need to wrap the tested component in a ReactRouter stub like below.

Unfortunately at the time of writing this there is no way to run certain Enzyme commands on the wrapped component AND I haven't found a successful way to mock the things that are needed from ReactRouter within the component without running into one error or another.

const context = {};

const component = mount(
	<StaticRouter location="/" context={context}>
		<MyComponent />
	</StaticRouter>
);

Okay, so now to get to the actual form events. In theory you could pass a mock event as the second parameter to simulate() but React would not pick up on those within the tests.

Fortunately we can just change the element to the final state and then trigger the change event.

Input field

const input = component.find('#myInputElement');
input.node.value = "abc";
input.simulate('change');

Checkbox

const check = component.find('#myCheckboxElement');
check.node.checked = "checked";
check.simulate('change');