CODEWITHSUNDEEP
javascriptreactjsantdreact-testing-library
login404
login404

Reputation: 85

How to change ant design select option using react testing library

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>

Upvotes: 1

Views: 3440

Answers (1)

zerocewl
zerocewl

Reputation: 12804

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.

Upvotes: 2

Related Questions