Как выполнить тестирование формы Office UI Fabric в браузере без браузера

Question

Я пытаюсь выполнить тестирование без браузера с помощью Фермента формы, изготовленной из компонентов Office UI Fabric в приложении React.
К сожалению, мне сложно заполнить значение для компонентов Dropdown, так как оно состоит из нескольких вложенных элементов span и button с непредсказуемыми идентификаторами.
Есть ли какой-либо пример или рекомендация на эту тему?

Answer 1

Каждый компонент в Fabric имеет * .test.tsx в своем исходном коде. В этом случае есть несколько десятков тестовых случаев в Dropdown.test.tsx в GitHub

Как правило, вы можете использовать ReactTestUtils.Simulat.click, чтобы щелкнуть по этому раскрывающемуся списку, и использовать обычные манипуляции с DOM, чтобы получить второй или N элементов:

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;