office-ui-fabric ドロップダウンの 'onChanged' イベントに提供されるコールバックを単体テストする必要があります (spyOn および expect(callback).toHaveBeenCalled() を使用)。問題は、このイベントをトリガーする方法がわからないことですか? DOM を見ようとしましたが、トリガーできる html select タグがありません。また、選択したアイテムの状態を (ドロップダウン コンポーネントで) 変更しようとしましたが、Jest で、ルート要素の状態しか変更できないというエラーが表示されます (ドロップダウン コンポーネントに浅くマウントしてダイブしてみました)。 )。これを達成する簡単な方法はありますか?
私は酵素とこのコードでJestを使用しています:
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);
そして、この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-Dropdown-item」はありません