Mastering React Test-Driven Development

Pre-selecting a value

Before we write out next test, define a findOption arrow function at the top of the describe block:

const findOption = (dropdownNode, textContent) => {  const options = Array.from(dropdownNode.childNodes);  return options.find(    option => option.textContent === textContent  );};

This function searches the DOM tree for a particular text node. We can find that node and then check that it is selected:

it('pre-selects the existing value', () => {  const services = ['Cut', 'Blow-dry'];  render(    <AppointmentForm      selectableServices={services}      service="Blow-dry"    />  );  const option = findOption(    field('service'),    'Blow-dry'  );  expect(option.selected).toBeTruthy();});

To make this pass, we set the value property on the root select