Improve jest performance significantly by downgrading to 24.9.0 (https://github.com/woocommerce/woocommerce-admin/pull/4942)

Recently there have been significant slowdowns
of the test suite in Jest. I frequently had the test suite
taking 130-150 seconds to run.

After some exploration and trial/error I found that
https://github.com/facebook/jest/issues/9457 is likely the cause.

This was confirmed after the downgrade where I saw test runs drop
to an average of about 35 seconds per run.

plugins/woocommerce-admin/package.json

@@ -55,7 +55,7 @@
 		"prestart": "npm run -s install-if-deps-outdated",
 		"start": "cross-env WC_ADMIN_PHASE=development npm run build:packages && cross-env WC_ADMIN_PHASE=development npm run build:feature-config && concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"node ./bin/packages/watch.js\"",
 		"pretest": "npm run -s install-if-no-packages",
-		"test": "wp-scripts test-unit-js --config tests/js/jest.config.json",
+		"test": "./node_modules/jest-24.9.0/bin/jest.js --config tests/js/jest.config.json",
 		"test:help": "wp-scripts test-unit-js --help",
 		"test:update-snapshots": "jest --updateSnapshot --config tests/js/jest.config.json",
 		"test:watch": "npm run test -- --watch",
@@ -164,7 +164,6 @@
 		"@wordpress/babel-preset-default": "4.10.0",
 		"@wordpress/browserslist-config": "2.6.0",
 		"@wordpress/custom-templated-path-webpack-plugin": "1.6.0",
-		"@wordpress/jest-preset-default": "5.5.0",
 		"@wordpress/postcss-plugins-preset": "1.3.0",
 		"@wordpress/postcss-themes": "1.0.5",
 		"@wordpress/prettier-config": "^0.3.0",
@@ -172,6 +171,7 @@
 		"ast-types": "0.13.3",
 		"autoprefixer": "9.8.5",
 		"babel-core": "7.0.0-bridge.0",
+		"babel-jest": "^26.2.2",
 		"babel-loader": "8.1.0",
 		"babel-plugin-transform-class-properties": "6.24.1",
 		"babel-plugin-transform-es2015-template-literals": "6.22.0",
@@ -183,12 +183,15 @@
 		"deasync": "0.1.20",
 		"deep-freeze": "0.0.1",
 		"docsify-cli": "4.4.1",
+		"enzyme": "^3.11.0",
 		"enzyme-adapter-react-16": "1.15.2",
+		"enzyme-to-json": "^3.5.0",
 		"fs-extra": "8.1.0",
 		"grunt": "1.2.1",
 		"grunt-checktextdomain": "1.0.1",
 		"grunt-wp-i18n": "1.0.3",
 		"husky": "4.2.5",
+		"jest-24.9.0": "npm:jest@^24.9.0",
 		"jest-environment-jsdom-sixteen": "1.0.3",
 		"lerna": "3.22.1",
 		"lint-staged": "10.2.11",

plugins/woocommerce-admin/tests/js/jest.config.json

@@ -1,12 +1,5 @@
 {
 	"rootDir": "../../",
-	"collectCoverageFrom": [
-		"client/**/*.js",
-		"packages/**/*.js",
-		"!**/node_modules/**",
-		"!**/vendor/**",
-		"!**/test/**"
-	],
 	"moduleDirectories": [
 		"node_modules",
 		"<rootDir>/client",
@@ -16,20 +9,30 @@
 		"tinymce": "<rootDir>/tests/js/mocks/tinymce",
 		"@woocommerce/(settings|wc-admin-settings)": "<rootDir>/client/settings/index.js",
 		"@woocommerce/(.*)": "<rootDir>/packages/$1/src",
-		"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/js/mocks/static"
+		"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/js/mocks/static",
+		"\\.(scss|css)$": "<rootDir>/tests/js/mocks/style-mock.js"
 	},
 	"restoreMocks": true,
 	"setupFiles": [
-		"<rootDir>/node_modules/@wordpress/jest-preset-default/scripts/setup-globals.js",
+		"<rootDir>/tests/js/setup-window-globals.js",
 		"<rootDir>/tests/js/setup-globals"
 	],
-	"preset": "@wordpress/jest-preset-default",
+	"setupFilesAfterEnv": [ "<rootDir>/tests/js/setup-enzyme.js" ],
+	"testMatch": [
+		"**/__tests__/**/*.[jt]s",
+		"**/test/*.[jt]s",
+		"**/?(*.)test.[jt]s"
+	],
+	"transform": {
+		"^.+\\.[t|j]s?$": "babel-jest"
+	},
 	"testPathIgnorePatterns": [
 		"/node_modules/",
 		"<rootDir>/.*/build/",
 		"<rootDir>/.*/build-module/"
 	],
-	"timers": "real",
 	"testEnvironment": "jest-environment-jsdom-sixteen",
-	"verbose": true
+	"timers": "modern",
+	"verbose": true,
+	"snapshotSerializers": [ "enzyme-to-json/serializer" ]
 }

plugins/woocommerce-admin/tests/js/mocks/style-mock.js

@@ -0,0 +1 @@
+module.exports = {};

plugins/woocommerce-admin/tests/js/setup-enzyme.js

@@ -0,0 +1,19 @@
+require( '@wordpress/jest-console' );
+
+// It "mocks" enzyme, so that we can delay loading of
+// the utility functions until enzyme is imported in tests.
+// Props to @gdborton for sharing this technique in his article:
+// https://medium.com/airbnb-engineering/unlocking-test-performance-migrating-from-mocha-to-jest-2796c508ec50.
+let mockEnzymeSetup = false;
+
+jest.mock( 'enzyme', () => {
+	const actualEnzyme = jest.requireActual( 'enzyme' );
+	if ( ! mockEnzymeSetup ) {
+		mockEnzymeSetup = true;
+
+		// configure enzyme 3 for React, from docs: http://airbnb.io/enzyme/docs/installation/index.html
+		const Adapter = jest.requireActual( 'enzyme-adapter-react-16' );
+		actualEnzyme.configure( { adapter: new Adapter() } );
+	}
+	return actualEnzyme;
+} );

plugins/woocommerce-admin/tests/js/setup-globals.js

@@ -101,7 +101,11 @@ wooCommercePackages.forEach( ( lib ) => {
 } );
 
 const config = require( '../../config/development.json' );
-window.wcAdminFeatures = config && config.features ? config.features : {};
+
+// Check if test is jsdom or node
+if ( global.window ) {
+	window.wcAdminFeatures = config && config.features ? config.features : {};
+}
 
 setLocaleData(
 	{ '': { domain: 'woocommerce-admin', lang: 'en_US' } },

plugins/woocommerce-admin/tests/js/setup-window-globals.js

@@ -0,0 +1,27 @@
+// Check if we're in a JSDOM test or not
+if ( global.window ) {
+	// These are necessary to load TinyMCE successfully
+	global.URL = window.URL;
+	global.window.tinyMCEPreInit = {
+		// Without this, TinyMCE tries to determine its URL by looking at the
+		// <script> tag where it was loaded from, which of course fails here.
+		baseURL: 'about:blank',
+	};
+	global.window.requestAnimationFrame = setTimeout;
+	global.window.cancelAnimationFrame = clearTimeout;
+	global.window.matchMedia = () => ( {
+		matches: false,
+		addListener: () => {},
+		removeListener: () => {},
+	} );
+
+	// Setup fake localStorage
+	const storage = {};
+	global.window.localStorage = {
+		getItem: ( key ) => ( key in storage ? storage[ key ] : null ),
+		setItem: ( key, value ) => ( storage[ key ] = value ),
+	};
+
+	// UserSettings global
+	global.window.userSettings = { uid: 1 };
+}