The most straightforward UI testing library for react. Just wrap your UI component/widget inside useScreenshotTest and render it on your browser.

The browser will render your component/widget along with a button named Capture and Compare

Hit the button and the tests will run and a report will be generated in test.html file.

Installation

npm i screenshot-test-react

Usage

1. In your project's package.json, under scripts, add-

"scripts": {
    ...
    ...
    "ss-test": "cd ./node_modules/screenshot-test-server/dist && node server.js" // add this
}

2. Write your tests. Below is a sample test-

import Component1 from '/path-to-component-1';
import Component2 from '/path-to-component-2';
import { useScreenShotTest } from 'screenshot-test-react';

const App = () => {

    const testComponents = [
        {
            component: Component1,
            title: 'Component 1 details to be observed',
            id: 'c1',
        },
        {
            component: Component2,
            title: 'Component 2 details to be observed',
            id: 'c2',
        },
        ...
    ];

    const screenshotConfig = {
        /* properties path, localhostUrl, port, quality etc (all optional) */
    };

    return useScreenShotTest(testComponents, screenshotConfig);
}

3. In your projects root directory, run-

npm run ss-test

This will start the test server.

4. Render your test component in your browser and press the "Capture and Compare" button. This will generate a folder named ss-test (or the path you provided in config) in your project's root directory.

5. Navigate to ss-test or (or the path you provided in config) folder and open the file named test.html in your browser.

Props

useScreenShotTest receives 2 parameters- Components array and ScreenshotConfig.

ScreenshotConfig is defined as-

interface ScreenshotConfig {
  path?: string; // path where screenshots should be saved, default: ss-test
  localhostUrl?: string; // for web & iOS emulator it is http://127.0.0.1, for Android emulator it is http://10.0.2.2
  port?: string; // port where test server should run, default: 8080
  batchSize?: number; // number of tests to be processed at a time, default: 10
  maxWidth?: number; // maxWidth to be used in html while rendering the captured screenshot, default: 500
  backgroundColor?: string; // backgroundColor to be used in html while rendering the captured screenshot, default: transparent
  showDiffInGrayScale?: boolean; // show diff image in grayScale? default: false
  quality?: number; // quality (0 to 1) while capturing the screenshot, default: 0.9
}

Note: all these properties are optional. In fact the second parameter to useScreenShotTest is entirely optional. When omitted, the library assigns the default values to each property.

Components is an array where each item of the array has following properties-

interface Components {
  component: (props?: any) => ReactElement;
  title: string;
  id: string;
  description?: string;
  showDiffInGrayScale?: boolean;
  maxWidth?: number;
  backgroundColor?: string;
  quality?: number;
}

Note: only the first 3 properties- component, title and id are required, rest are optional.