CODEWITHSUNDEEP
javascriptreactjsdropdownreact-selecttestcafe
Sunny
Sunny

Reputation: 932

Testing react-select dropdown with testcafe

I'm trying to write a lib function to test all my react-select dropdowns using testcafe. But it is not working as expected.

I try to find the react-select with the id '#my-dropdown' that is passed a prop to my component. Also, I try to find the options in the dropdown and then select the option with the new value.

However, it doesn't seem to work as expected.

What am I doing wrong here?

Custom Select component: 

<div className='Custom-select'>
  <Select {...props} classNamePrefix='customSelect' tabSelectsValue isSearchable={false}/>
</div>

Note: Props contain the id - '#my-dropdown'.

testCafe test case:

test('DropDown test', async t => {
  await dropdownValueSelector(t, { selector: '#my-dropdown', newValue: 'value 2' });
});

dropDownValueSelector

export default async (t, { selector, newValue }) => {
  await t.click(selector).click(selector.find('option').withText(newValue));
  const dropdownOption = Selector('.customSelect__input').find('input');
  await t.click(customSelect).find(dropdownOption.withText(newValue);
});

Upvotes: 2

Views: 974

Answers (1)

Alex Skorkin
Alex Skorkin

Reputation: 4274

Try using the testcafe-react-selectors plug-in; it provides selector extensions that make it easier to test ReactJS components. These extensions allow you to select page elements in a way that is native to React.

Upvotes: 1

Related Questions