Question

我正在使用React设计库中的ant design select来测试我的组件，我想将select选项更改为Education Loan。

<Select
showSearch
placeholder="Select a Loan type"
optionFilterProp="children"
onChange={e => this.handleChangeText(e, "loanType")}
filterOption={(input, option) =>
    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
>
<Option value="education">Education Loan</Option>
<Option value="personal">Personal/Home Loan</Option>

Answer 1

您需要触发的事件是select的第一个孩子上的mouseDown（）。

const elt = getByTestId('your-select-test-id').firstElementChild;
fireEvent.mouseDown(elt); // THIS WILL OPEN THE SELECT !

您有2个选项，使用toBeInTheDocument（）或通过使用waitFor（...）等待动画结束

选项1：速度更快但不完全准确，我更喜欢将其用于简单的用例，因为它可以使测试更快，更同步

expect(getByText('Option from Select')).toBeInTheDocument(); // WORKS !

选项2：由于需要等待动画完成而变慢，但对于复杂情况更准确

await waitFor(() => expect(getByText('Option from Select')).toBeVisible()); // WORK

有关详情，请参见github antd issue。

如何使用反应测试库更改蚂蚁设计选择选项

1 个答案: