Mastering React Test-Driven Development

Initial selection of data

Let's start by asserting that each li element has a button element:

1. First up, let's display a message to the user if there are no appointments scheduled for today. In the AppointmentsDayView describe block, add this test:

it('initially shows a message saying there are no appointments today', () => {  render(<AppointmentsDayView appointments={[]} />);  expect(container.textContent).toMatch(    'There are no appointments scheduled for today.'  );});

2. Make that pass by adding in a message at the bottom of rendered output. We don't need a check for an empty appointments array just yet; we'll need another test to triangulate to that:

return (  <div id="appointmentsDayView">    ...    <p>There are no appointments scheduled for today.</p> ...