Add custom setup and ignore snapshot files.

.gitignore

@@ -80,4 +80,4 @@ wp-tests-config.php
 /docker-compose.override.yml
 
 # Visual regression test diffs
-tests/e2e/specs/__image_snapshots__/__diff_output__
+tests/visual-regression/specs/__image_snapshots__

package.json

@@ -169,6 +169,7 @@
 		"test:php": "node ./tools/local-env/scripts/docker.js run --rm phpunit phpunit",
 		"test:php-composer": "node ./tools/local-env/scripts/docker.js run --rm phpunit php ./vendor/bin/phpunit",
 		"test:e2e": "node ./tests/e2e/run-tests.js",
+		"test:visual": "node ./tests/visual-regression/run-tests.js",
 		"wp-packages-update": "wp-scripts packages-update"
 	}
 }

tests/e2e/config/bootstrap.js

@@ -1,6 +1,4 @@
 import { get } from 'lodash';
-import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
-
 import {
 	clearLocalStorage,
 	enablePageDialogAccept,
@@ -35,14 +33,6 @@ const pageEvents = [];
 // The Jest timeout is increased because these tests are a bit slow
 jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );
 
-const toMatchImageSnapshot = configureToMatchImageSnapshot( {
-	dumpDiffToConsole: true,
-	failureThresholdType: 'percent',
-	failureThreshold: 3,
-} );
-
-// Extend Jest's "expect" with image snapshot functionality.
-expect.extend( { toMatchImageSnapshot } );
 
 /**
  * Adds an event listener to the page to handle additions of page event
@@ -114,11 +104,7 @@ function observeConsoleLogging() {
 		// correctly. Instead, the logic here synchronously inspects the
 		// internal object shape of the JSHandle to find the error text. If it
 		// cannot be found, the default text value is used instead.
-		text = get(
-			message.args(),
-			[ 0, '_remoteObject', 'description' ],
-			text
-		);
+		text = get( message.args(), [ 0, '_remoteObject', 'description' ], text );
 
 		// Disable reason: We intentionally bubble up the console message
 		// which, unless the test explicitly anticipates the logging via

tests/visual-regression/config/bootstrap.js

@@ -0,0 +1,8 @@
+import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
+
+const toMatchImageSnapshot = configureToMatchImageSnapshot( {
+	failureThreshold: 1,
+} );
+
+// Extend Jest's "expect" with image snapshot functionality.
+expect.extend( { toMatchImageSnapshot } );

tests/visual-regression/jest.config.js

@@ -0,0 +1,8 @@
+const config = require( '@wordpress/scripts/config/jest-e2e.config' );
+
+const jestVisualRegressionConfig = {
+	...config,
+	setupFilesAfterEnv: [ '<rootDir>/config/bootstrap.js' ],
+};
+
+module.exports = jestVisualRegressionConfig;

tests/visual-regression/run-tests.js

@@ -0,0 +1,21 @@
+const dotenv = require( 'dotenv' );
+const dotenv_expand = require( 'dotenv-expand' );
+const { sync: spawn } = require( 'cross-spawn' );
+const { execSync } = require( 'child_process' );
+
+// WP_BASE_URL interpolates LOCAL_PORT, so needs to be parsed by dotenv_expand().
+dotenv_expand( dotenv.config() );
+
+const result = spawn( 'node', [ require.resolve( 'puppeteer/install' ) ], {
+	stdio: 'inherit',
+} );
+if ( result.status > 0 ) {
+	process.exit( result.status );
+}
+
+// Run the tests, passing additional arguments through to the test script.
+execSync(
+	'wp-scripts test-e2e --config tests/visual-regression/jest.config.js ' +
+		process.argv.slice( 2 ).join( ' ' ),
+	{ stdio: 'inherit' }
+);