Office ui fabric 无法触发';一旦改变';在Jest/Ezyme测试中使用Office UI Fabric下拉菜单的代表

Office ui fabric 无法触发';一旦改变';在Jest/Ezyme测试中使用Office UI Fabric下拉菜单的代表,office-ui-fabric,Office Ui Fabric,我需要对office ui结构下拉列表中提供给“onChanged”事件的回调进行单元测试(使用spyOn和expect(callback).toHaveBeenCalld()。问题是我不知道如何触发这个事件?我试图查看DOM,但没有可以触发的html选择标记。我还试图更改所选项目的状态(在下拉组件上),但Jest告诉我,我只能更改根元素的状态(我尝试使用shallow、mount和dive进入下拉组件)时出错。有没有一个简单的方法来实现这一点 我正在使用Jest with Ezyme和以下代码

我需要对office ui结构下拉列表中提供给“onChanged”事件的回调进行单元测试(使用spyOn和expect(callback).toHaveBeenCalld()。问题是我不知道如何触发这个事件?我试图查看DOM,但没有可以触发的html选择标记。我还试图更改所选项目的状态(在下拉组件上),但Jest告诉我,我只能更改根元素的状态(我尝试使用shallow、mount和dive进入下拉组件)时出错。有没有一个简单的方法来实现这一点

我正在使用Jest with Ezyme和以下代码:

const div = document.createElement('div');
ReactDOM.render(<Dropdown
            label='My label'
            placeHolder='My placeholder'
            options={[
                { key: 'A', text: 'Option a' },
                { key: 'B', text: 'Option b' },
            ]}
            onChanged={() => { return; }} />, div);
const dropdownContainer = div.querySelector('.ms-Dropdown') as HTMLElement;
ReactTestUtils.Simulate.click(dropdownContainer);
constdiv=document.createElement('div');
render({return;}}/>,div);
const dropdowncainer=div.querySelector('.ms Dropdown')作为HTMLElement;
ReactTestUtils.Simulate.click(dropdownContainer);
并输出以下html:

<div class="ms-Dropdown-container">
    <label class="ms-Label ms-Dropdown-label root-37" id="Dropdown0-label" for="Dropdown0">My label</label>
    <div data-is-focusable="true" id="Dropdown0" tabindex="0" aria-expanded="true" role="listbox" aria-autocomplete="none" aria-live="off" aria-describedby="Dropdown0-option" class="ms-Dropdown root_f16b4a0d is-open" aria-owns="Dropdown0-list">
        <span id="Dropdown0-option" class="ms-Dropdown-title title_f16b4a0d ms-Dropdown-titleIsPlaceHolder titleIsPlaceHolder_f16b4a0d" aria-atomic="true" role="listbox" aria-readonly="true">
            <span>My placeholder</span>
        </span>
        <span class="ms-Dropdown-caretDownWrapper caretDownWrapper_f16b4a0d">
            <i data-icon-name="ChevronDown" class="ms-Dropdown-caretDown caretDown_f16b4a0d root-39" role="presentation" aria-hidden="true"></i>
        </span>
    </div>
    <span class="ms-Layer"/>
</div>

我的标签
我的占位符


没有“.ms”下拉项“

您应该能够使用ID为
ms下拉列表的
querySelector
,然后使用
reactestutils.Simulate。单击
。在现有的
下拉列表中有这样的例子
单元测试:

it('当所选项目不同时发出onChanged回调',()=>{
const container=document.createElement('div');
let dropdownRoot:HTMLElement |未定义;
文件.正文.附件(容器);
const onChangedSpy=jasmine.createSpy('onChanged');
试一试{
ReactDOM.render(
,
容器
);
dropdownRoot=container.querySelector('.ms Dropdown')作为HTMLElement;
ReactTestUtils.Simulate.click(dropdownRoot);
const secondItemElement=document.querySelector('.ms下拉项[data index=“2”]”)作为HTMLElement;
reactestutils.Simulate.click(secondItemElement);
}最后{
expect(onChangedSpy).toHaveBeenCalledWith(默认选项[2],2];
}
});
单元测试源文件:

我用我的实际代码编辑了我的问题,这与您展示的代码几乎相同。不过,结构单元测试是有效的。我想知道这是测试环境还是测试设置问题?您能否轻松地将测试中的代码临时移动到结构中,并查看它是否存在与类似单元测试相同的问题?