Testing Shopify Polaris form components with Enzyme and Jest

test.jsx

// I've spent a few hours working out how to simulate the selection of a select option in my React app using the Polaris. Polaris provides a 
// <Select /> component to use that wraps the <select> DOM element, so simulating a change is a bit tricky and involves reading the Polaris 
// source to work out what's going on. Here's how I got it working for me.

// Polaris wants an event object with currentTarget defined. Not sure why they use currentTarget instead of target...
mountedWrapper.find('select[name="location_id"]').prop('onChange')({
  currentTarget: {
    value: newLocationId,
  },
});

// Now assert that the state of the parent container that the form is controlled by has changed.
expect(container.state().booking.location_id).toEqual(
  newLocationId
);


// Further reading:
// https://github.com/airbnb/enzyme/issues/1617
// https://github.com/airbnb/enzyme/issues/400