Skip to content

Visual regression testing demo with Mugshot and React Component Playground

Notifications You must be signed in to change notification settings

react-bucharest/mugshot-demo

Repository files navigation

Visual regression testing demo with Mugshot and React Component Playground

How to run in Docker

You first need to install Docker for Mac: https://docs.docker.com/docker-for-mac/

yarn install
yarn run docker:test:visual

How to run locally

  • Install required packages

    yarn install
  • Install selenium-standalone and start a server

    yarn install selenium-standalone@latest -g
    selenium-standalone install
    selenium-standalone start
  • Run a Component Playground instance locally

    yarn run playground

    The visual test suite will iterate through each component/fixture pair in the playground and check for differences.

  • Run the visual test suite

    yarn run test:visual

    This will generate the baseline screenshots the first time and will check for differences in subsequent runs.

  • Make a change to the styles of any component (ex: button.less) and re-run the tests.

  • Finally inspect the diffs inside the reporter by opening visual-report/statics/index.html in any browser. visual test reporter