Plugins

Plugins are configured through the plugins configuration option. The following is a list of officially supported plugins.

Storybook

The Happo plugin for Storybook will automatically turn your stories into Happo examples. See the Storybook integration page for a full introduction.

npm install --save-dev happo-plugin-storybook

const happoPluginStorybook = require('happo-plugin-storybook');

// .happo.js
module.exports {
  // ...
  plugins: [
    happoPluginStorybook(),
  ],
};

Puppeteer

The puppeteer plugin is deprecated. Use prerender: false in your config instead.

If you have Happo examples that rely on measuring the DOM, the default pre-renderer (JSDOM) might not produce the results you need. By using a real browser (Chrome) to pre-render examples, measurements are available on render time.

npm install --save-dev happo-plugin-puppeteer

const happoPluginPuppeteer = require('happo-plugin-puppeteer');

// .happo.js
module.exports {
  // ...
  plugins: [
    happoPluginPuppeteer(),
  ],
};

TypeScript

The Happo plugin for TypeScript will inject the necessary webpack configuration to make Happo process TypeScript files correctly. See https://github.com/happo/happo-plugin-typescript.

npm install --save-dev happo-plugin-typescript

const happoPluginTypescript = require('happo-plugin-typescript');

// .happo.js
module.exports {
  // ...
  plugins: [
    happoPluginTypescript(),
  ],
};

Scraping

The scrape plugin is deprecated. Use the Cypress integration instead.

The Happo "scrape" plugin will make it possible to grab Happo examples from an existing website. See https://github.com/happo/happo-plugin-scrape. Make sure to also check out the built-in full-page support.

Gatsby

The Gatsby plugin is not under active development. Try using the Cypress integration instead.

The Happo plugin for Gatsby turns all your static pages into Happo tests. See https://github.com/happo/happo-plugin-gatsby.

npm install --save-dev happo-plugin-gatsby

const happoPluginGatsby = require('happo-plugin-gatsby');

// .happo.js
module.exports {
  // ...
  plugins: [
    happoPluginGatsby(),
  ],
  type: 'plain',
};