Lauricio Su Lauricio

Visual Regression Testing with Jest

This is a walkthrough of how to set up Visual Regression Testing with Jest for an application created with create-react-app.

The following walkthrough uses React as an example, but the approach should work for any modern frontend library! I assume it can be used with Angular, Vue, Cycle.js and more.

This gist walks you through a create-react-app application as an example of how to set up Visual Regression Testing in Jest using libraries I wrote recently which enable this: jsdom-screenshot, jest-transform-css and jest-transform-file.

	# borrowed from https://github.com/openlabs/docker-wkhtmltopdf/blob/master/Dockerfile

	sed 's/main$/main universe/' -i /etc/apt/sources.list
	apt-get update
	apt-get upgrade -y

	# Download and install wkhtmltopdf
	apt-get install -y build-essential xorg libssl-dev libxrender-dev wget gdebi
	wget http://download.gna.org/wkhtmltopdf/0.12/0.12.2/wkhtmltox-0.12.2_linux-trusty-amd64.deb
	gdebi --n wkhtmltox-0.12.2_linux-trusty-amd64.deb

	<head>
	<title>taptest</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=no">

	</head>

	<body>
	{{> hello}}
	</body>