Mastering React Test-Driven Development

Constructing a calendar view

We can now begin our table:

1. Create a nested describe block with a new test at the bottom of test/AppointmentForm.test.js. This time, we'll use the querySelector function rather than the DOM form API. The querySelector function is more appropriate here because we're interested in testing the layout than the radio buttons themselves:

describe('time slot table', () => {  it('renders a table for time slots', () => {    render(<AppointmentForm />);    expect(      container.querySelector('table#time-slots')    ).not.toBeNull();  });});

2. Define a new TimeSlotTable component, above the definition of AppointmentForm. We don't need to mark this one as an export as it will only be referenced by AppointmentForm:

const TimeSlotTable ...