Gary Wu Chun-Lin

Shallow

Real unit test (isolation, no children render)

Simple shallow

Calls:

constructor
render

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.

	function sleep(duration) {
	return new Promise(function(resolve, reject) {
	setTimeout(()=> { resolve(0) }, duration);
	})
	}

	async function delayedMessage(message, delay) {
	let remainingTime = await sleep(delay)
	console.log(message, `(remaining time: ${remainingTime})`)
	}

	import React from "react";
	import ReactDOM from "react-dom";

	import configureStore from "./store/configureStore";


	const store = configureStore();


	const rootEl = document.getElementById("root");

	const createMySocketMiddleware = (url) => {
	return storeAPI => {
	let socket = createMyWebsocket(url);

	socket.on("message", (message) => {
	storeAPI.dispatch({
	type : "SOCKET_MESSAGE_RECEIVED",
	payload : message
	});
	});

	// for multiple requests
	let isRefreshing = false;
	let failedQueue = [];

	const processQueue = (error, token = null) => {
	failedQueue.forEach(prom => {
	if (error) {
	prom.reject(error);
	} else {
	prom.resolve(token);