Earlier in this book, we wrote some tests for the countries and regions application, and since we have already rewritten that in RN, why not also rewrite the tests? That will allow us to verify that writing unit tests for RN isn't that different from writing them for plain React. We had already written tests for the <RegionsTable> component; let's check them here:

// Source file: src/regionsStyledApp/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() });

const fakeDeviceData = {
    isTablet: false,
    isPortrait: true,
    height: 1000,
    width: 720,
    scale: 1,
    fontScale: 1
};

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

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

        expect(wrapper.contains("Montevideo"));
        expect(wrapper.contains("Maldonado"));
        expect(wrapper.contains("Cerro Largo"));
    });
});

The differences are really minor, and mostly it's the same code:

• We had to add fakeDeviceData, but that was only because our RN component required it
• We changed Enzyme.render() to Enzyme.shallow()
• We changed the way we use the wrapper object to check for included text directly, using wrapper.contains()

We can also have a look at the <CountrySelect> tests, which involved simulating events. We can skip the tests that are practically identical to the React versions; let's focus on the last one of our original tests:

// Source file: src/regionsStyledApp/countrySelect.test.js

/* @flow */
import React from "react";
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

import { CountrySelect } from "./countrySelect.component";

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

const threeCountries = [
    {
        countryCode: "UY",
        countryName: "Uruguay"
    },
    {
        countryCode: "AR",
        countryName: "Argentina"
    },
    {
        countryCode: "BR",
        countryName: "Brazil"
    }
];

const fakeDeviceData = {
    isTablet: false,
    isPortrait: true,
    height: 1000,
    width: 720,
    scale: 1,
    fontScale: 1
}

describe("CountrySelect", () => {
    // 
    // some tests omitted
    //

    it("correctly calls onSelect", () => {
        const mockGetCountries = jest.fn();
        const mockOnSelect = jest.fn();

        const wrapper = Enzyme.shallow(
            <CountrySelect
                deviceData={fakeDeviceData}
                loading={false}
                currentCountry={""}
                onSelect={mockOnSelect}
                getCountries={mockGetCountries}
                list={threeCountries}
            />
        );

        wrapper.find("Picker").simulate("ValueChange", "UY");

        expect(mockGetCountries).not.toHaveBeenCalled();
        expect(mockOnSelect).toHaveBeenCalledTimes(1);
        expect(mockOnSelect).toHaveBeenCalledWith("UY");
    });
});

The key difference between how we wrote the tests for React and for RN is in the way we .find() the element to click (RN uses a Picker component, instead of a group of option elements), and the event we simulate ("ValueChange" instead of "change"). Other than that, though, the code is the same as earlier.

Having gone over some of the differences in RN components testing, we are done, because there are no differences in the code when testing actions or reducers. These use the same style of functional unit testing that doesn't involve any particular RN features, so we have nothing more to say. In the next section, we'll look at our test run.