Make it pass

We're now ready to make failing test pass:

1. Add import to test/Appointment.test.js, below the two React imports:

import { Appointment } from '../src/Appointment';

1. Run tests with npm test. You'll get a different error this time:

Cannot find module '../src/Appointment' from 'Appointment.test.js'

1. Let's create that module. Type the following at your command line:

mkdir src
touch src/Appointment.js

1. In your editor, add the following content to src/Appointment.js:
   

export const Appointment = () => {};

Why have I created a shell of an Appointment without actually creating an implementation? This might seem pointless, but another core principle of the test-driven developer is always do the simplest thing to pass the test. We could rephrase this as always do the simplest thing to fix the error you're working on.

Remember when I mentioned that we listen carefully to what the test runner tells us? In this case, the test runner said Cannot find module Appointment, so what was needed was to create that module:

1. Run npm test. You'll get a lot of React output as a large stack trace. If you scroll up to the top, you'll see this:
   

Error: Uncaught [Invariant Violation: Appointment(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]

1. To fix that, we need to do what it's telling us: we need to return something "from render". So, let's return something. Change the file to read as follows:

import React from 'react';

export const Appointment = () => <div></div>;

1. Now, if you run the test, you should get a test failure:

FAIL test/Appointment.test.js
  Appointment
    ? renders the customer first name (23ms)

  ● Appointment ? renders the customer first name

    expect(received).toMatch(expected)

    Expected value to match:
      "Ashley"
    Received:
      ""

1. To fix the test, change the Appointment definition to look like this:

export const Appointment = () => (
  <div>Ashley</div>
);

But, wait a second. This test isn't using our appointment variable that we defined in our test. We just hard-coded a value of Ashley in there!

Remember our principle: always implement the simplest thing that will possibly work. That includes hard-coding, when it's possible. In order to get to the real implementation, we need to add more tests. This process is called triangulation. The more specific our tests get, the more general our production code needs to get.

Let's triangulate:

1. Make a copy of your first test, pasting it just under the first test, and change the test description and the name of Ashley to Jordan, as follows:

it('renders another customer first name', () => {
  const customer = { firstName: 'Jordan' };
  const component = <Appointment customer={customer} />;
  const container = document.createElement('div');
  document.body.appendChild(container);

  ReactDOM.render(component, container);

  expect(document.body.textContent).toMatch('Jordan');
});

1. Run tests with npm test. We expect this test to fail, and it does. Take a careful look at this output:

FAIL test/Appointment.test.js
  Appointment
  ? renders the customer name (19ms)
  ? renders another customer name (20ms)

● Appointment ? renders another customer name

  expect(received).toMatch(expected)

  Expected value to match:
    "Jordan"
  Received:
    "AshleyAshley"

Yes, it did fail—but with the text AshleyAshley!

This kind of repeated text is an indicator that our tests are not running independently of one another. There is some shared state that isn't being cleared. We need to change course and uncover what's going on.