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>
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.
