We had already seen snapshot testing in the Testing changes with snapshots section of Chapter 10, Testing Your Application. It so happens that the very same code will work perfectly with RN apps, without demanding any specific changes, other than those depending on variations in the code. Let's consider the following example. The <RegionsTable> component we had developed earlier has an extra prop in RN: deviceData. So, we can copy the original snapshot test code and just add the new prop, as follows:

// Source file: src/regionsStyledApp/regionsTable.snapshot.test.js

/* @flow */

import React from "react";
import TestRenderer from "react-test-renderer";

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

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

describe("RegionsTable", () => {
    it("renders correctly an empty list", () => {
        const tree = TestRenderer.create(
            <RegionsTable deviceData={fakeDeviceData} list={[]} />
        ).toJSON();
        expect(tree).toMatchSnapshot();
    });

    it("renders correctly a list", () => {
        const tree = TestRenderer.create(
            <RegionsTable
                deviceData={fakeDeviceData}
                list={[
                    {
                        countryCode: "UY",
                        regionCode: "10",
                        regionName: "Montevideo"
                    },
                    {
                        countryCode: "UY",
                        regionCode: "9",
                        regionName: "Maldonado"
                    },
                    {
                        countryCode: "UY",
                        regionCode: "5",
                        regionName: "Cerro Largo"
                    }
                ]}
            />
        ).toJSON();
        expect(tree).toMatchSnapshot();
    });
});

If you bother to compare versions, you'll see that the only changed parts are the ones I highlighted in bold text, and they have to do with the different components, not with any RN-specific thing. If you write a snapshot test for the <CountrySelect> component, you'll find exactly the same result: the only necessary changes have to do with its new props (deviceData, currentCountry), but pose no other difficulty.

For variety, let's add snapshot testing to our <Main> component. We'll have two interesting details here:

• Since our component rendered itself differently in portrait or landscape mode, we should have two tests; and
• As the component includes connected components, we must not forget to add a <Provider> component, lest the connections cannot be made.

The code would be as follows; in particular, notice the varying device data, and the <Provider> inclusion:

// Source file: src/regionsStyledApp/main.snapshot.test.js

/* @flow */

import React from "react";
import { Provider } from "react-redux";
import TestRenderer from "react-test-renderer";

import { Main } from "./main.component";
import { store } from "./store";

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

describe("Main component", () => {
    it("renders in portrait mode", () => {
        const tree = TestRenderer.create(
            <Provider store={store}>
                <Main
                    deviceData={{ ...fakeDeviceData, isPortrait: true }}
                />
            </Provider>
        ).toJSON();
        expect(tree).toMatchSnapshot();
    });

    it("renders in landscape mode", () => {
        const tree = TestRenderer.create(
            <Provider store={store}>
                <Main
                    deviceData={{ ...fakeDeviceData, isPortrait: false }}
                />
            </Provider>
        ).toJSON();
        expect(tree).toMatchSnapshot();
    });
});