Revert "Migrate apps unit tests away from wp scripts (#79097)" (#79159)

This reverts commit d9acd80.

.teamcity/_self/projects/WPComPlugins.kt

@@ -144,7 +144,13 @@ private object EditingToolkit : WPComPluginBuild(
 				sed -i -e "/^Stable tag:\s/c\Stable tag: %build.number%" ./editing-toolkit-plugin/readme.txt
 			"""
 		}
-
+		bashNodeScript {
+			name = "Run JS tests"
+			scriptContent = """
+				cd apps/editing-toolkit
+				yarn test:js --reporters=default --reporters=jest-teamcity --maxWorkers=${'$'}JEST_MAX_WORKERS
+			"""
+		}
 		// Note: We run the PHP lint after the build to verify that the newspack-blocks
 		// code is also formatted correctly.
 		bashNodeScript {
@@ -217,6 +223,15 @@ private object OdysseyStats : WPComPluginBuild(
 	withPRNotify = "false",
 	docsLink = "PejTkB-3N-p2",
 	buildSteps = {
+		bashNodeScript {
+			name = "Run Unit Tests"
+			scriptContent = """
+				cd apps/odyssey-stats
+
+				# run unit tests
+				yarn test:js --reporters=default --reporters=jest-teamcity --maxWorkers=${'$'}JEST_MAX_WORKERS
+			"""
+		}
 		bashNodeScript {
 			name = "Run Size Test"
 			scriptContent = """

apps/editing-toolkit/bin/babel-transform.js

@@ -0,0 +1,5 @@
+const createTransformer = require( 'babel-jest' ).default.createTransformer;
+
+module.exports = createTransformer( {
+	presets: [ '@wordpress/babel-preset-default', '@babel/preset-typescript' ],
+} );

apps/editing-toolkit/bin/js-unit-setup.js

@@ -1 +1,3 @@
+import '@testing-library/jest-dom/extend-expect';
+
 jest.mock( 'a8c-fse-common-data-stores', () => {}, { virtual: true } );

apps/editing-toolkit/jest.config.js

@@ -1,4 +1,37 @@
-module.exports = {
-	preset: '../../test/apps/jest-preset.js',
-	setupFilesAfterEnv: [ require.resolve( './bin/js-unit-setup' ) ],
+/**
+ * Test configuration for the FSE plugin.
+ *
+ * Will match files such that:
+ *   1. Must be in the apps/editing-toolkit/ directory
+ *   2. Must have .test.EXT at the end of the filename
+ *   3. EXT (above) must be one of js, ts, jsx, or tsx.
+ *
+ * Note: In order to use a different jest config for e2e tests, this config file
+ * must be kept in the bin/ folder to prevent it from being detected as the
+ * config file for e2e tests.
+ */
+
+const path = require( 'path' );
+const base = require( '@automattic/calypso-jest' );
+// @wordpress/scripts manually adds additional Jest config ontop of
+// @wordpress/jest-preset-default so we pull in this file to extend it
+const defaults = require( '@wordpress/scripts/config/jest-unit.config.js' );
+
+// Basically, CWD, so 'apps/editing-toolkit'.
+// Without this, it tries to use 'apps/editing-toolkit/bin'
+const pluginRoot = path.resolve( './' );
+
+const config = {
+	...base,
+	...defaults,
+	rootDir: path.normalize( '../../' ), // To detect wp-calypso root node_modules
+	testMatch: [ `${ pluginRoot }/**/?(*.)test.[jt]s?(x)` ],
+	transform: { '^.+\\.[jt]sx?$': path.join( __dirname, 'bin', 'babel-transform' ) },
+	testEnvironment: 'jsdom',
+	setupFilesAfterEnv: [
+		...( defaults.setupFilesAfterEnv || [] ), // extend if present
+		'<rootDir>/apps/editing-toolkit/bin/js-unit-setup',
+	],
 };
+
+module.exports = config;

apps/editing-toolkit/package.json

@@ -40,8 +40,10 @@
 		"lint:php": "../../vendor/bin/phpcs --standard=../phpcs.xml ./ ",
 		"lint:php:fix": "../../vendor/bin/phpcbf --standard=../phpcs.xml ./ ",
 		"sync:newspack-blocks": "./bin/sync-newspack-blocks.sh",
-		"test:js": "yarn run -T test-apps apps/editing-toolkit",
-		"test:js:watch": "yarn test:js --watch",
+		"test:js": "npx wp-scripts test-unit-js --config='jest.config.js' --colors",
+		"test:js:help": "npx wp-scripts test-unit-js --config='jest.config.js' --help --colors",
+		"test:js:update-snapshots": "npx wp-scripts test-unit-js -u --config='jest.config.js' --colors",
+		"test:js:watch": "npx wp-scripts test-unit-js --config='jest.config.js' --watch --colors",
 		"test:php": "npx wp-env run phpunit 'phpunit -c /var/www/html/wp-content/plugins/editing-toolkit-plugin/phpunit.xml.dist'",
 		"wpcom-sync": "./bin/wpcom-watch-and-sync.sh"
 	},
@@ -96,6 +98,7 @@
 		"@wordpress/primitives": "^3.21.0",
 		"@wordpress/private-apis": "^0.9.0",
 		"@wordpress/rich-text": "^6.0.0",
+		"@wordpress/scripts": "^25.0.0",
 		"@wordpress/server-side-render": "^4.0.0",
 		"@wordpress/url": "^3.24.0",
 		"calypso": "workspace:^",
@@ -118,18 +121,21 @@
 	"devDependencies": {
 		"@automattic/calypso-apps-builder": "workspace:^",
 		"@automattic/calypso-eslint-overrides": "workspace:^",
+		"@automattic/calypso-jest": "workspace:^",
 		"@tanstack/eslint-plugin-query": "^4.29.8",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.0.0",
 		"@types/node": "^18.11.18",
 		"@types/wordpress__plugins": "^3.0.0",
 		"@wordpress/eslint-plugin": "^13.7.0",
+		"@wordpress/jest-preset-default": "^10.4.0",
 		"@wordpress/readable-js-assets-webpack-plugin": "^2.6.0",
 		"babel-jest": "^27.5.1",
 		"eslint-plugin-inclusive-language": "^2.2.0",
 		"eslint-plugin-json-es": "^1.5.7",
 		"eslint-plugin-md": "^1.0.19",
 		"eslint-plugin-you-dont-need-lodash-underscore": "^6.12.0",
+		"jest-teamcity": "^1.9.0",
 		"wait-for-expect": "^3.0.2",
 		"webpack": "^5.68.0"
 	}

apps/odyssey-stats/bin/babel-transform.js

@@ -0,0 +1,5 @@
+const createTransformer = require( 'babel-jest' ).default.createTransformer;
+
+module.exports = createTransformer( {
+	presets: [ '@wordpress/babel-preset-default', '@babel/preset-typescript' ],
+} );

apps/odyssey-stats/jest.config.js

@@ -1,3 +1,32 @@
-module.exports = {
-	preset: '../../test/apps/jest-preset.js',
+/**
+ * Test configuration for the Odyssey Stats.
+ *
+ * Will match files such that:
+ *   1. Must be in the apps/odyssey-stats/ directory
+ *   2. Must have .test.EXT at the end of the filename
+ *   3. EXT (above) must be one of js, ts, jsx, or tsx.
+ */
+
+const path = require( 'path' );
+const base = require( '@automattic/calypso-jest' );
+// @wordpress/scripts manually adds additional Jest config ontop of
+// @wordpress/jest-preset-default so we pull in this file to extend it
+const defaults = require( '@wordpress/scripts/config/jest-unit.config.js' );
+
+// Basically, CWD, so 'apps/odyssey-stats'.
+// Without this, it tries to use 'apps/odyssey-stats/bin'
+const pluginRoot = path.resolve( './' );
+
+const config = {
+	...base,
+	...defaults,
+	rootDir: path.normalize( '../../' ), // To detect wp-calypso root node_modules
+	testMatch: [ `${ pluginRoot }/**/?(*.)test.[jt]s?(x)` ],
+	transform: { '^.+\\.[jt]sx?$': path.join( __dirname, 'bin', 'babel-transform' ) },
+	testEnvironment: 'jsdom',
+	setupFilesAfterEnv: [
+		...( defaults.setupFilesAfterEnv || [] ), // extend if present
+	],
 };
+
+module.exports = config;

apps/odyssey-stats/package.json

@@ -22,8 +22,10 @@
 		"build:stats": "calypso-build",
 		"dev": "yarn run calypso-apps-builder --localPath dist --remotePath /home/wpcom/public_html/widgets.wp.com/calypso-stats",
 		"show-stats": "NODE_ENV=production EMIT_STATS=true yarn build",
-		"test:js": "yarn run -T test-apps apps/odyssey-stats",
-		"test:js:watch": "yarn test:js --watch",
+		"test:js": "npx wp-scripts test-unit-js --config='jest.config.js' --colors",
+		"test:js:help": "npx wp-scripts test-unit-js --config='jest.config.js' --help --colors",
+		"test:js:update-snapshots": "npx wp-scripts test-unit-js -u --config='jest.config.js' --colors",
+		"test:js:watch": "npx wp-scripts test-unit-js --config='jest.config.js' --watch --colors",
 		"test:size": "yarn run build && size-limit",
 		"translate": "rm -rf dist/strings && mkdirp dist && wp-babel-makepot '../../{client,packages,apps}/**/*.{js,jsx,ts,tsx}' --ignore '**/node_modules/**,**/test/**,**/*.d.ts' --base '../../' --dir './dist/strings' --output './dist/odyssey-strings.pot' && node bin/build-languages.js"
 	},
@@ -55,18 +57,21 @@
 		"@automattic/calypso-babel-config": "workspace:^",
 		"@automattic/calypso-build": "workspace:^",
 		"@automattic/calypso-eslint-overrides": "workspace:^",
+		"@automattic/calypso-jest": "workspace:^",
 		"@automattic/languages": "workspace:^",
 		"@automattic/webpack-extensive-lodash-replacement-plugin": "workspace:^",
 		"@automattic/webpack-inline-constant-exports-plugin": "workspace:^",
 		"@automattic/wp-babel-makepot": "workspace:^",
 		"@babel/core": "^7.17.5",
 		"@size-limit/file": "^8.2.4",
 		"@wordpress/dependency-extraction-webpack-plugin": "^4.6.0",
+		"@wordpress/scripts": "^25.0.0",
 		"autoprefixer": "^10.2.5",
 		"babel-jest": "^27.5",
 		"gettext-parser": "^6.0.0",
 		"html-webpack-plugin": "^5.0.0-beta.4",
 		"jest": "^27.2.4",
+		"jest-teamcity": "^1.9.0",
 		"lodash": "^4.17.21",
 		"mkdirp": "^1.0.4",
 		"node-fetch": "^2.6.6",

bin/teamcity-task-runner.mjs

@@ -1,4 +1,4 @@
-import { spawn } from 'node:child_process';
+import { spawn } from 'child_process';
 import chalk from 'chalk';
 
 // This is technically an import side-effect for the callee, but any TeamCity

bin/unit-test-suite.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import util from 'node:util';
+import util from 'util';
 import glob from 'glob';
 import runTask from './teamcity-task-runner.mjs';
 
@@ -60,8 +60,6 @@ const testClient = withUnitTestInfo( 'test-client --maxWorkers=8' );
 const testPackages = withUnitTestInfo( 'test-packages --maxWorkers=4' );
 const testServer = withUnitTestInfo( 'test-server --maxWorkers=4' );
 const testBuildTools = withUnitTestInfo( 'test-build-tools --maxWorkers=4' );
-// Includes ETK and Odyssey Stats, migrated here from their individual builds.
-const testApps = withUnitTestInfo( 'test-apps --maxWorkers=1' );
 
 const testWorkspaces = {
 	name: 'yarn',
@@ -97,7 +95,6 @@ try {
 		await runTask( testServer );
 		await runTask( testBuildTools );
 		await runTask( testWorkspaces );
-		await runTask( testApps );
 	} )();
 
 	await completeTasks( [ testClientTask, tscTasks, otherTestTasks ] );

package.json

@@ -118,10 +118,8 @@
 		"test-desktop:e2e": "echo 'Deprecated, run `cd desktop && yarn run test:e2e` instead'",
 		"test-integration": "jest -c=test/integration/jest.config.js",
 		"test-integration:watch": "yarn run test-integration --watch",
-		"test-apps": "jest -c=test/apps/jest.config.js",
-		"test-apps:watch": "yarn run test-apps --watch",
 		"test-packages": "jest -c=test/packages/jest.config.js",
-		"test-packages:watch": "yarn run test-packages --watch",
+		"test-packages:watch": "jest -c=test/packages/jest.config.js --watch",
 		"test-server": "jest -c=test/server/jest.config.js",
 		"test-server:coverage": "yarn run test-server --coverage",
 		"test-server:watch": "yarn run test-server --watch",
@@ -379,6 +377,7 @@
 		"@wordpress/redux-routine": "4.23.0",
 		"@wordpress/reusable-blocks": "4.0.0",
 		"@wordpress/rich-text": "6.0.0",
+		"@wordpress/scripts": "25.0.0",
 		"@wordpress/server-side-render": "4.0.0",
 		"@wordpress/shortcode": "3.23.0",
 		"@wordpress/style-engine": "1.6.0",