@wordpress/e2e-tests 8.34.0 → 9.0.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 9.0.0 (2025-11-12)
+
+### Breaking Changes
+
+- Removed test configurations from the package, as this package is now deprecated in favor of Playwright end-to-end tests residing at the root of the Gutenberg project.
+
 ## 8.34.0 (2025-10-29)
 
 ## 8.33.0 (2025-10-17)

package/README.md

@@ -1,86 +1,20 @@
-# E2E Tests
+# E2E Test Plugins and MU-Plugins
 
-End-To-End (E2E) tests for WordPress.
+This package contains test plugins and mu-plugins used by E2E tests in WordPress.
 
-**Note that there's currently an ongoing [project](https://github.com/WordPress/gutenberg/issues/38851) to migrate E2E tests to Playwright instead. This package is deprecated and will only accept bug fixes until fully migrated.**
+**Note**: The E2E tests themselves have been migrated to Playwright and are now located in `/test/e2e/`.
 
-## Installation
+## Contents
 
-Install the module
+- `/plugins/` - Test plugins used by E2E tests
+- `/mu-plugins/` - Must-use plugins for test environment configuration
+- `/assets/` - Test assets (images, etc.)
 
-```bash
-npm install @wordpress/e2e-tests --save-dev
-```
+## Usage
 
-## Running tests
+These plugins and mu-plugins are automatically loaded in the test environment via `wp-env`. They provide test fixtures and functionality needed for various E2E test scenarios.
 
-The following commands are available on the Gutenberg repo:
-
-```json
-{
-	"test:e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
-	"test:e2e:debug": "wp-scripts --inspect-brk test-e2e --config packages/e2e-tests/jest.config.js --puppeteer-devtools",
-	"test:e2e:watch": "npm run test:e2e -- --watch"
-}
-```
-
-### Run all available tests
-
-```bash
-npm run test:e2e
-```
-
-### Run all available tests and listen for changes.
-
-```bash
-npm run test:e2e:watch
-```
-
-### Run a specific test file
-
-```bash
-npm run test:e2e -- packages/e2e-test/<path_to_test_file>
-# Or, in order to watch for changes:
-npm run test:e2e:watch -- packages/e2e-test/<path_to_test_file>
-```
-
-### Debugging
-
-Makes e2e tests available to debug in a Chrome Browser.
-
-```bash
-npm run test:e2e:debug
-```
-
-After running the command, tests will be available for debugging in Chrome by going to chrome://inspect/#devices and clicking `inspect` under the path to `/test-e2e.js`.
-
-#### Debugging in `vscode`
-
-Debugging in a Chrome browser can be replaced with `vscode`'s debugger by adding the following configuration to `.vscode/launch.json`:
-
-```json
-{
-	"type": "node",
-	"request": "launch",
-	"name": "Debug current e2e test",
-	"program": "${workspaceFolder}/node_modules/@wordpress/scripts/bin/wp-scripts.js",
-	"args": [
-		"test-e2e",
-		"--config=${workspaceFolder}/packages/e2e-tests/jest.config.js",
-		"--verbose=true",
-		"--runInBand",
-		"--watch",
-		"${file}"
-	],
-	"console": "integratedTerminal",
-	"internalConsoleOptions": "neverOpen",
-	"trace": "all"
-}
-```
-
-This will run jest, targeting the spec file currently open in the editor. `vscode`'s debugger can now be used to add breakpoints and inspect tests as you would in Chrome DevTools.
-
-**Note**: This package requires Node.js version with long-term support status (check [Active LTS or Maintenance LTS releases](https://nodejs.org/en/about/previous-releases)). It is not compatible with older versions.
+For information about writing E2E tests, see the [E2E testing guide](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md).
 
 ## Contributing to this package
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "8.34.0",
-	"description": "End-To-End (E2E) tests for WordPress.",
+	"version": "9.0.0",
+	"description": "Test plugins and mu-plugins for E2E tests in WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
 	"keywords": [
@@ -24,28 +24,11 @@
 		"npm": ">=8.19.2"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^11.34.0",
-		"@wordpress/interactivity": "^6.34.0",
-		"@wordpress/interactivity-router": "^2.34.0",
-		"@wordpress/jest-console": "^8.34.0",
-		"@wordpress/jest-puppeteer-axe": "^7.34.0",
-		"@wordpress/scripts": "^30.27.0",
-		"@wordpress/url": "^4.34.0",
-		"chalk": "^4.0.0",
-		"expect-puppeteer": "^4.4.0",
-		"filenamify": "^4.2.0",
-		"jest-message-util": "^29.6.2",
-		"jest-snapshot": "^29.6.2",
-		"uuid": "^9.0.1"
-	},
-	"peerDependencies": {
-		"jest": ">=29",
-		"puppeteer-core": ">=23",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"@wordpress/interactivity": "^6.35.0",
+		"@wordpress/interactivity-router": "^2.35.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
+	"gitHead": "77aa1f194edceafe8ac2a1b9438bf84b557e76e3"
 }

package/plugins/interactive-blocks/router-styles-wrapper/render.php

@@ -88,7 +88,8 @@ $wrapper_attributes = get_block_wrapper_attributes();
 	<div
 		data-testid="hydrated"
 		data-wp-interactive="test/router-styles"
-		data-wp-bind--hidden="state.undefined"
+		data-wp-bind--hidden="!state.hydrated"
+		data-wp-init="callbacks.setHydrated"
 		hidden
 	>
 		Hydrated

package/plugins/interactive-blocks/router-styles-wrapper/view.js

@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { store, getElement } from '@wordpress/interactivity';
+import { store, getElement, withSyncEvent } from '@wordpress/interactivity';
 
 const { state } = store( 'test/router-styles', {
 	state: {
 		clientSideNavigation: false,
 		prefetching: false,
+		hydrated: false,
 	},
 	actions: {
-		*navigate( e ) {
+		navigate: withSyncEvent( function* ( e ) {
 			e.preventDefault();
 			state.clientSideNavigation = false;
 			const { actions } = yield import(
@@ -17,7 +18,7 @@ const { state } = store( 'test/router-styles', {
 			);
 			yield actions.navigate( e.target.href );
 			state.clientSideNavigation = true;
-		},
+		} ),
 		*prefetch() {
 			state.prefetching = true;
 			const { ref } = getElement();
@@ -28,4 +29,9 @@ const { state } = store( 'test/router-styles', {
 			state.prefetching = false;
 		},
 	},
+	callbacks: {
+		setHydrated() {
+			state.hydrated = true;
+		},
+	},
 } );

package/babel.config.js

@@ -1,7 +0,0 @@
-module.exports = ( api ) => {
-	api.cache( true );
-
-	return {
-		presets: [ '@wordpress/babel-preset-default' ],
-	};
-};

package/config/flaky-tests-reporter.js

@@ -1,96 +0,0 @@
-/**
- * A **flaky** test is defined as a test which passed after auto-retrying.
- * - By default, all tests run once if they pass.
- * - If a test fails, it will automatically re-run at most 2 times.
- * - If it pass after retrying (below 2 times), then it's marked as **flaky**
- *   but displayed as **passed** in the original test suite.
- * - If it fail all 3 times, then it's a **failed** test.
- */
-/**
- * External dependencies
- */
-const fs = require( 'fs' ).promises;
-const path = require( 'path' );
-const { formatResultsErrors } = require( 'jest-message-util' );
-const filenamify = require( 'filenamify' );
-
-class FlakyTestsReporter {
-	constructor( globalConfig, options ) {
-		this._globalConfig = globalConfig;
-		this._options = options;
-
-		this.failingTestCaseResults = new Map();
-	}
-
-	async onRunStart() {
-		try {
-			fs.mkdir( 'flaky-tests' );
-		} catch ( err ) {
-			// Ignore the error if the directory already exists.
-			if ( err.code !== 'EEXIST' ) {
-				throw err;
-			}
-		}
-	}
-
-	async onTestCaseResult( test, testCaseResult ) {
-		const testPath = path.relative( this._globalConfig.rootDir, test.path );
-		const testTitle = testCaseResult.title;
-
-		switch ( testCaseResult.status ) {
-			case 'failed': {
-				if ( ! this.failingTestCaseResults.has( testTitle ) ) {
-					this.failingTestCaseResults.set( testTitle, [] );
-				}
-				this.failingTestCaseResults
-					.get( testTitle )
-					.push( testCaseResult );
-				break;
-			}
-			case 'passed': {
-				if ( this.failingTestCaseResults.has( testTitle ) ) {
-					const failingResults =
-						this.failingTestCaseResults.get( testTitle );
-
-					await fs.writeFile(
-						`flaky-tests/${ filenamify( testTitle ) }.json`,
-						JSON.stringify( {
-							version: 1,
-							runner: 'jest-circus',
-							title: testTitle,
-							path: testPath,
-							results: failingResults,
-						} ),
-						'utf-8'
-					);
-
-					// Don't silence flaky error messages for debugging reason.
-					// eslint-disable-next-line no-console
-					console.error(
-						`Test passed after ${ failingResults.length } failed ${
-							failingResults.length === 1 ? 'attempt' : 'attempts'
-						}:`
-					);
-					// eslint-disable-next-line no-console
-					console.error(
-						formatResultsErrors(
-							failingResults,
-							this._globalConfig,
-							{},
-							test.path
-						)
-					);
-				}
-				break;
-			}
-			default:
-				break;
-		}
-	}
-
-	onRunComplete() {
-		this.failingTestCaseResults.clear();
-	}
-}
-
-module.exports = FlakyTestsReporter;

package/config/is-gutenberg-plugin.js

@@ -1,3 +0,0 @@
-// eslint-disable-next-line @wordpress/wp-global-usage
-globalThis.IS_GUTENBERG_PLUGIN =
-	process.env.npm_package_config_IS_GUTENBERG_PLUGIN === 'true';

package/config/setup-test-framework.js

@@ -1,268 +0,0 @@
-/**
- * External dependencies
- */
-import { toMatchInlineSnapshot, toMatchSnapshot } from 'jest-snapshot';
-
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	activateTheme,
-	clearLocalStorage,
-	enablePageDialogAccept,
-	isOfflineMode,
-	resetPreferences,
-	setBrowserViewport,
-	trashAllPosts,
-} from '@wordpress/e2e-test-utils';
-
-/**
- * Timeout, in seconds, that the test should be allowed to run.
- *
- * @type {string|undefined}
- */
-const PUPPETEER_TIMEOUT = process.env.PUPPETEER_TIMEOUT;
-
-/**
- * CPU slowdown factor, as a numeric multiplier.
- *
- * @type {string|undefined}
- */
-const THROTTLE_CPU = process.env.THROTTLE_CPU;
-
-/**
- * Network download speed, in bytes per second.
- *
- * @type {string|undefined}
- */
-const SLOW_NETWORK = process.env.SLOW_NETWORK;
-
-/**
- * Emulate no internet connection.
- *
- * @type {string|undefined}
- */
-const OFFLINE = process.env.OFFLINE;
-
-/**
- * Set of console logging types observed to protect against unexpected yet
- * handled (i.e. not catastrophic) errors or warnings. Each key corresponds
- * to the Puppeteer ConsoleMessage type, its value the corresponding function
- * on the console global object.
- *
- * @type {Object<string,string>}
- */
-const OBSERVED_CONSOLE_MESSAGE_TYPES = {
-	warning: 'warn',
-	error: 'error',
-};
-
-/**
- * Array of page event tuples of [ eventName, handler ].
- *
- * @type {Array}
- */
-const pageEvents = [];
-
-// The Jest timeout is increased because these tests are a bit slow.
-jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );
-
-// Retry failed tests at most 2 times in CI.
-// This enables `flaky-tests-reporter` and `report-flaky-tests` GitHub action
-// to mark test as flaky and automatically create a tracking issue about it.
-if ( process.env.CI ) {
-	jest.retryTimes( 2 );
-}
-
-async function setupBrowser() {
-	await clearLocalStorage();
-	await setBrowserViewport( 'large' );
-}
-
-/**
- * Adds an event listener to the page to handle additions of page event
- * handlers, to assure that they are removed at test teardown.
- */
-function capturePageEventsForTearDown() {
-	page.on( 'newListener', ( eventName, listener ) => {
-		pageEvents.push( [ eventName, listener ] );
-	} );
-}
-
-/**
- * Removes all bound page event handlers.
- */
-function removePageEvents() {
-	pageEvents.forEach( ( [ eventName, handler ] ) => {
-		page.removeListener( eventName, handler );
-	} );
-}
-
-/**
- * Adds a page event handler to emit uncaught exception to process if one of
- * the observed console logging types is encountered.
- */
-function observeConsoleLogging() {
-	page.on( 'console', ( message ) => {
-		const type = message.type();
-		if ( ! OBSERVED_CONSOLE_MESSAGE_TYPES.hasOwnProperty( type ) ) {
-			return;
-		}
-
-		let text = message.text();
-
-		// An exception is made for _blanket_ deprecation warnings: Those
-		// which log regardless of whether a deprecated feature is in use.
-		if ( text.includes( 'This is a global warning' ) ) {
-			return;
-		}
-
-		// A chrome advisory warning about SameSite cookies is informational
-		// about future changes, tracked separately for improvement in core.
-		//
-		// See: https://core.trac.wordpress.org/ticket/37000
-		// See: https://www.chromestatus.com/feature/5088147346030592
-		// See: https://www.chromestatus.com/feature/5633521622188032
-		if (
-			text.includes( 'A cookie associated with a cross-site resource' )
-		) {
-			return;
-		}
-
-		// Viewing posts on the front end can result in this error, which
-		// has nothing to do with Gutenberg.
-		if ( text.includes( 'net::ERR_UNKNOWN_URL_SCHEME' ) ) {
-			return;
-		}
-
-		// Network errors are ignored only if we are intentionally testing
-		// offline mode.
-		if (
-			text.includes( 'net::ERR_INTERNET_DISCONNECTED' ) &&
-			isOfflineMode()
-		) {
-			return;
-		}
-
-		// As of WordPress 5.3.2 in Chrome 79, navigating to the block editor
-		// (Posts > Add New) will display a console warning about
-		// non - unique IDs.
-		// See: https://core.trac.wordpress.org/ticket/23165
-		if ( text.includes( 'elements with non-unique id #_wpnonce' ) ) {
-			return;
-		}
-
-		// Ignore all JQMIGRATE (jQuery migrate) deprecation warnings.
-		if ( text.includes( 'JQMIGRATE' ) ) {
-			return;
-		}
-
-		// Ignore framer-motion warnings about reduced motion.
-		if (
-			text.includes(
-				'You have Reduced Motion enabled on your device. Animations may not appear as expected.'
-			)
-		) {
-			return;
-		}
-
-		const logFunction = OBSERVED_CONSOLE_MESSAGE_TYPES[ type ];
-
-		// As of Puppeteer 1.6.1, `message.text()` wrongly returns an object of
-		// type JSHandle for error logging, instead of the expected string.
-		//
-		// See: https://github.com/GoogleChrome/puppeteer/issues/3397
-		//
-		// The recommendation there to asynchronously resolve the error value
-		// upon a console event may be prone to a race condition with the test
-		// completion, leaving a possibility of an error not being surfaced
-		// 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 = message.args()[ 0 ]?._remoteObject?.description ?? text;
-
-		// Disable reason: We intentionally bubble up the console message
-		// which, unless the test explicitly anticipates the logging via
-		// @wordpress/jest-console matchers, will cause the intended test
-		// failure.
-
-		// eslint-disable-next-line no-console
-		console[ logFunction ]( text );
-	} );
-}
-
-/**
- * Simulate slow network or throttled CPU if provided via environment variables.
- */
-async function simulateAdverseConditions() {
-	if ( ! SLOW_NETWORK && ! OFFLINE && ! THROTTLE_CPU ) {
-		return;
-	}
-
-	if ( OFFLINE ) {
-		await page.setOfflineMode( true );
-	}
-
-	if ( SLOW_NETWORK ) {
-		// See: https://chromedevtools.github.io/devtools-protocol/tot/Network#method-emulateNetworkConditions
-		// The values below simulate fast 3G conditions as per https://github.com/ChromeDevTools/devtools-frontend/blob/80c102878fd97a7a696572054007d40560dcdd21/front_end/sdk/NetworkManager.js#L252-L274
-		await page.emulateNetworkConditions( {
-			// Download speed (bytes/s)
-			download: ( ( 1.6 * 1024 * 1024 ) / 8 ) * 0.9,
-			// Upload speed (bytes/s)
-			upload: ( ( 750 * 1024 ) / 8 ) * 0.9,
-			// Latency (ms)
-			latency: 150 * 3.75,
-		} );
-	}
-
-	if ( THROTTLE_CPU ) {
-		// See: https://chromedevtools.github.io/devtools-protocol/tot/Emulation#method-setCPUThrottlingRate
-		await page.emulateCPUThrottling( Number( THROTTLE_CPU ) );
-	}
-}
-
-// Override snapshot matchers to throw errors as soon as possible,
-// See https://jestjs.io/docs/expect#bail-out
-// This is to fix a bug in Jest that snapshot failures won't trigger `test_fn_failure` events.
-expect.extend( {
-	toMatchInlineSnapshot( ...args ) {
-		this.dontThrow = () => {};
-
-		return toMatchInlineSnapshot.call( this, ...args );
-	},
-	toMatchSnapshot( ...args ) {
-		this.dontThrow = () => {};
-
-		return toMatchSnapshot.call( this, ...args );
-	},
-} );
-
-// Before every test suite run, delete all content created by the test. This ensures
-// other posts/comments/etc. aren't dirtying tests and tests don't depend on
-// each other's side-effects.
-beforeAll( async () => {
-	capturePageEventsForTearDown();
-	enablePageDialogAccept();
-	observeConsoleLogging();
-	await simulateAdverseConditions();
-	await resetPreferences();
-	await activateTheme( 'twentytwentyone' );
-	await trashAllPosts();
-	await trashAllPosts( 'wp_block' );
-	await setupBrowser();
-	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
-	await page.emulateMediaFeatures( [
-		{ name: 'prefers-reduced-motion', value: 'reduce' },
-	] );
-} );
-
-afterEach( async () => {
-	await resetPreferences();
-	await setupBrowser();
-} );
-
-afterAll( () => {
-	removePageEvents();
-} );

package/jest.config.js

@@ -1,26 +0,0 @@
-/**
- * WordPress dependencies
- */
-const baseConfig = require( '@wordpress/scripts/config/jest-e2e.config' );
-
-module.exports = {
-	...baseConfig,
-	testMatch: [ '<rootDir>/specs/**/*.test.js' ],
-	setupFiles: [ '<rootDir>/config/is-gutenberg-plugin.js' ],
-	setupFilesAfterEnv: [
-		'<rootDir>/config/setup-test-framework.js',
-		'@wordpress/jest-console',
-		'@wordpress/jest-puppeteer-axe',
-		'expect-puppeteer',
-	],
-	testPathIgnorePatterns: [ '/node_modules/' ],
-	snapshotFormat: {
-		escapeString: false,
-		printBasicPrototype: false,
-	},
-	reporters: [
-		...baseConfig.reporters,
-		// Report flaky tests results into artifacts for used in `report-flaky-tests` action.
-		process.env.CI && '<rootDir>/config/flaky-tests-reporter.js',
-	].filter( Boolean ),
-};