How to do browserless testing of an Office UI Fabric form in React

Question

I'm trying to do browserless testing with Enzyme of a form made of Office UI Fabric components in a React application.
Unfortunately I'm having a hard time filling out the value for Dropdown components, since it is composed of several nested span and button elements with unpredictable ids.
Is there any example or recommendation on this topic?

Answer 1

Every component in Fabric has a *.test.tsx in their source code. In this case there are a few dozen test cases in Dropdown.test.tsx at GitHub

Basically, you can use ReactTestUtils.Simulat.click to click on that dropdown, and to use normal DOM manipulation to get the second or N elements:

ReactDOM.render(
    <Dropdown label="testgroup" defaultSelectedKeys={['1']} multiSelect id="test" options={DEFAULT_OPTIONS} />,
        container
);
dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
ReactTestUtils.Simulate.click(dropdownRoot);
const secondItemElement = document.querySelectorAll('.ms-Dropdown-item[role="checkbox"]')[1] as HTMLElement;