We want to test a component, so let's pick up a suitable one. For our first unit testing, let's work with the <RegionsTable> component, which didn't process any events; it was just a display component. Tests are usually named the same way as the component, but changing the extension from .js to .test.js—or to .spec.js, but I like .test.js better. Pick whatever you want, and just be consistent about it.

First, let's start by considering what should we test. The specification for our component says that it works differently depending on whether it receives an empty or non-empty list of countries. In the first case, we can test that the produced HTML text includes No regions, and in the second case, we should verify that all of the provided regions do appear in the output. Of course, you can think up more detailed, specific cases, but try not to make your tests too brittle, meaning that the slightest change in implementation will make your tests fail. The tests that I described may not cover all cases, but it's pretty certain that even if you were to implement the component in a different way, the tests should still be successful.

Starting out with the actual tests, all of them will start in a similar way: with us needing to import to necessary libraries, plus the component to test, and setting up Enzyme and its adapter. In the following code, I'll highlight the related lines:

// Source file: src/regionsApp/regionsTable.test.js

/* @flow */

import React from "react";
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

import { RegionsTable } from "./regionsTable.component";

Enzyme.configure({ adapter: new Adapter() });

// continued...

Like we did earlier, we'll start using describe() and it() to set up different test cases. To check the empty regions list case, we can just use a few lines of code:

// ...continues

describe("RegionsTable", () => {
    it("renders correctly an empty list", () => {
        const wrapper = Enzyme.render(<RegionsTable list={[]} />);
        expect(wrapper.text()).toContain("No regions.");
    });

// continued...

We use Enzyme.render() to generate the DOM for our component, and the .text() method to generate a text version of it. With the latter, we just need to verify that the desired text appears so that the whole test is really short.

We also had a second use case, in which we provided a non-empty list of regions. The code is similar, but obviously longer; let's check out the code first, and we'll explain it after:

// ...continues

    it("renders correctly a list", () => {
        const wrapper = Enzyme.render(
            <RegionsTable
                list={[
                    {
                        countryCode: "UY",
                        regionCode: "10",
                        regionName: "Montevideo"
                    },
                    {
                        countryCode: "UY",
                        regionCode: "9",
                        regionName: "Maldonado"
                    },
                    {
                        countryCode: "UY",
                        regionCode: "5",
                        regionName: "Cerro Largo"
                    }
                ]}
            />
        );
        expect(wrapper.text()).toContain("Montevideo");
        expect(wrapper.text()).toContain("Maldonado");
        expect(wrapper.text()).toContain("Cerro Largo");
    });
});

The logic is pretty similar: render the components, produce text, check that the right content is there. As we said, you could also verify if each region is within a <li> element, and if they have keys, and so on; keep in mind, however, what we wrote about brittle tests, and avoid over-specifying the tests, so that only one possible, specific, given implementation of the component could pass them!