Mastering React Test-Driven Development

Specifying list items

Now, let's fill in the list items for the ol element we just rendered.

1. Create a third test in the new describe block, with this content:

it('renders each appointment in an li', () => {  const today = new Date();  const appointments = [   { startsAt: today.setHours(12, 0) },   { startsAt: today.setHours(13, 0) }  ];  render(<AppointmentsDayView appointments={appointments} />);  expect(container.querySelectorAll('li')).toHaveLength(2);  expect(    container.querySelectorAll('li')[0].textContent  ).toEqual('12:00');  expect(    container.querySelectorAll('li')[1].textContent  ).toEqual('13:00');});

Jest will show the following error:

  Expected length: 2  Received length: 0  Received object: [] 58 | render(<Appointments appointments={appointments} ...