0.3.6 • Published 6 years ago
hubble-x v0.3.6
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:
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}
CLI
Run all tests: $ npx hubble
Run a group of tests: $ npx hubble GroupName
Run a single test: $ npx hubble GroupName/TestName
Update the "expected" image for tests: $ npx hubble --update
View HTML report: $ npx hubble report