Hubble-x NPM | npm.io

hubble

A visual regression testing tool for React components

Installation

npm i hubble-x --save-dev

Usage

Create a folder named hubble-tests in the root of your React app. This is where you will keep your tests. Make sure your tests end with the .test.js extension. Example repository structure:

your-react-app/
├── node_modules/
│   └── hubble-x/
└── hubble-tests/
    └── your-tests.test.js

An example test file:

// Accordion.test.js
import React from 'react';
import hubble from 'hubble-x';

import Accordion from '../components/Accordion';

hubble.testGroup('Accordion')
  .add('expanded', () => (
    <Accordion label="Hello" isExpanded="true">
      Some content
    </Accordion>
  ))
  .add('not expanded', () => (
    <Accordion label="Hello" isExpanded="false">
      Some content
    </Accordion>
  ), {x:0, y:0, width:800, height:200});

Run your tests: $ npx hubble

View the report: $ npx hubble report

Screenshots

Terminal output:

presi_gif

HTML report:

API

.testGroup(groupName)

groupName \ The name of this test group.

.add(testName, reactFn, clip)

testName \ The name of the test to be added.
reactFn \<function()> A function which returns a react component.
clip \ An object which specifies clipping region of the page. Should have the following fields:
- x \ x-coordinate of top-left corner of clip area.
- y \ y-coordinate of top-left corner of clip area.
- width \ width of clipping area.
- height \ height of clipping area.
- default: {x: 0, y: 0, width: 800, height: 600}