Mastering React Test-Driven Development

Using the Router Switch component

In the App component we created, we had three components on the main page: two navigation buttons and an AppointmentsDayViewLoader instance. Both the Router code and our test code becomes simpler if we batch those up into one component.

Here's what an extracted MainScreen component looks like:

export const MainScreen = () => (  <React.Fragment>    <div className="button-bar">      <Link to="/addCustomer" className="button">        Add customer and appointment      </Link>      <Link to="/searchCustomers" className="button">        Search customers      </Link>    </div>    <AppointmentsDayViewLoader />  </React.Fragment>);

Of course, this needs tests itself, which is why it's exported. Once you've test-driven that component, it can be used in App as ...