Jest is the de-facto testing tool in the React community and is maintained by Facebook. Jest is included in Create React App (CRA) projects, which means that it is already installed and configured in our project. We'll start to get familiar with Jest by adding some unit tests on the required function in the Form component. So, let's open our frontend project in Visual Studio Code and carry out the following steps:

1. Create a new file called Form.test.ts in the src folder that contains the following content:

import { required } from './Form';

test('When required is called with empty string, an error should be returned', () => {
  // TODO - call required passing in an empty string
  // TODO - check that an error is returned
});

Notice that the extension of the file is test.ts.

The test function in Jest takes in two parameters:

• The first parameter is a description of the test that will be shown in the test output.
• The second parameter is an arrow function, which will contain our test.

So, the test is going to check that the require function returns an error when an empty string is passed into it.

2. Let's call the required function with an empty string and check the result:

test('When required is called with empty string, an error should be returned', () => {
  const result = required('');
  expect(result).toBe('This must be populated');
});

We pass the result variable we are checking into the Jest expect function. Then, we chain a toBe matcher function onto this, which checks that the result from the expect function is the same as the parameter that was supplied to the toBe function.

3. Let's create another test on the required function for when a non-empty string is passed into it:

test('When required is called with a value, an empty string should be returned', () => {
  const result = required('test');
  expect(result).toBe('');
});

So, we expect an empty string to be returned when a non-empty string is passed into the required function.

4. It's time to check that our tests pass. Enter the following command in the Terminal:

> npm test

Jest will run the tests that it finds in our project and output the results:

So, Jest finds our two tests, and the example test on the App component that came with CRA. All three tests pass—that's great news!

The require function is straightforward to test because it has no dependencies. How do we test a React component that has lots of dependencies, such as the browser's DOM and React itself? We'll find out in the next section.