How to change ant design select option using react testing library

Question

I am using ant design select using react testing library am testing my component I wanted to change the select option to 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

The event you need to trigger is a mouseDown() on the first child of the select.

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

You have 2 options, use toBeInTheDocument() or wait for the animation to be over by using waitFor(...)

Option 1: Faster but not totally accurate, I prefer to use this for simple use cases as it makes the tests faster and synchronous

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

Option 2: Slower as you need to wait for the animation to finish but more accurate for complex cases

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

See depending github antd issue for more details.