Adding a form element

Let's create our first form:

1. Create a new file called test/CustomerForm.test.js and add the following:

import React from 'react';
import { createContainer } from './domManipulators';
import { CustomerForm } from '../src/CustomerForm';

describe('CustomerForm', () => {
  let render, container;

  beforeEach(() => {
    ({ render, container } = createContainer());
  });
});

1. Add the following test into the describe block:

it('renders a form', () => {
  render(<CustomerForm />);
  expect(
    container.querySelector('form[id="customer"]')
  ).not.toBeNull();
});

1. We have a complete test, so let's run it and see what happens:

FAIL test/CustomerForm.test.js
  ● Test suite failed to run

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

1. Go ahead and create src/CustomerForm.js. Running your test again should give you the following output:

FAIL test/CustomerForm.test.js
 ● CustomerForm ? renders a label for the first name field

 Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

      10 |
    > 11 |   render: component => ReactDOM.render(component, container),
         |                                        ^
      12 |   container
      13 | };

1. One issue with our domManipulators code is that Jest's stack trace points to a failure within our helper code, not the test itself. Thankfully, the error message is helpful enough; we need to add an export that matches the import we wrote at the top of our test file. Add the following line to src/CustomerForm.js:

export const CustomerForm = () => null;

1. Running tests gives another failure:

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

1. Fix that by making the component return something:

import React from 'react';

export const CustomerForm = () => <form id="customer" />;

This passes our tests.