如何在 React 中对 Office UI Fabric 表单进行无浏览器测试

Question

我正在尝试在 React 应用程序中使用 Enzyme 由 Office UI Fabric 组件组成的表单进行无浏览器测试。
不幸的是，我很难填写 Dropdown 组件的值，因为它由几个嵌套的跨度和按钮元素组成，具有不可预测的 ID。
是否有关于此主题的示例或建议？

Answer 1

Fabric 中的每个组件在其源代码中都有一个 *.test.tsx。在这种情况下，在 GitHub

Dropdown.test.tsx 中有几十个测试用例

基本上，您可以使用 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;

如何在 React 中对 Office UI Fabric 表单进行无浏览器测试

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

reactjs

office-ui-fabric

enzyme