Jest test open react-select menu

Question

I have a component that uses react-select. I want to test the correct props are being passed to it, and those are being displayed correctly. Is there anyway to force the menu to open in enzyme/jest?

Answer 1

You can force change the state of the internal StateManager component

const tree = mount(<MyComponent />);
tree.find('Select').find('StateManager').instance().setState({ menuIsOpen: true });
tree.update();

Alternatively, a better way is to check the props of the component without opening the Select menu. This let's you abstract out react-select better in your tests.

const tree = mount(<MyComponent />);
// Run tests against options prop of Select
// expect(tree.find('Select').props('options')).toHaveLength(10);