test: Enable jest-watch-typeahead for native tests (#51869)

* test: Enable `jest-watch-typeahead` for native tests

Allow filtering test by file or test name while in watch mode. This
matches existing configuration for the web tests.

* test: Refactor Jest configuration to fix file name filter regex

Previously, Jest was executed from within a nested directory. Doing so
caused the regex patterns used for the `jest-watch-typeahead` to break,
as the `../../` would be erroneously included in the file name.

.github/workflows/unit-test.yml

@@ -296,4 +296,4 @@ jobs:
               run: npx lerna run build
 
             - name: Running the tests
-              run: npm run native test -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"
+              run: npm run test:native -- --ci --maxWorkers=2 --cacheDirectory="$HOME/.jest-cache"

.gitignore

@@ -35,7 +35,7 @@ yarn.lock
 Thumbs.db
 
 # Report generated from jest-junit
-test/native/junit.xml
+junit.xml
 
 # Local overrides
 .wp-env.override.json

docs/contributors/code/react-native/getting-started-react-native.md

@@ -89,15 +89,15 @@ One of the extensions we are using is the [React Native Tools](https://marketpla
 Use the following command to run the test suite:
 
 ```sh
-npm run native test
+npm run test:native
 ```
 
 It will run the [jest](https://github.com/facebook/jest) test runner on your tests. The tests are running on the desktop against Node.js.
 
 To run the tests with debugger support, start it with the following CLI command:
 
 ```sh
-npm run native test:debug
+npm run test:native:debug
 ```
 
 Then, open `chrome://inspect` in Chrome to attach the debugger (look into the "Remote Target" section). While testing/developing, feel free to sprinkle `debugger` statements anywhere in the code that you'd like the debugger to break.

docs/contributors/code/react-native/osx-setup-guide.md

@@ -212,7 +212,7 @@ After a bit of a wait, we’ll see something like this:
 ## Unit Tests
 
 ```sh
-npm run native test
+npm run test:native
 ```
 
 ## Integration Tests

docs/contributors/code/testing-overview.md

@@ -497,7 +497,7 @@ Part of the unit-tests suite is a set of Jest tests run exercise native-mobile c
 To locally run the tests in debug mode, follow these steps:
 
 0. Make sure you have ran `npm ci` to install all the packages
-1. Run `npm run native test:debug` inside the Gutenberg root folder, on the CLI. Node is now waiting for the debugger to connect.
+1. Run `npm run test:native:debug` inside the Gutenberg root folder, on the CLI. Node is now waiting for the debugger to connect.
 2. Open `chrome://inspect` in Chrome
 3. Under the "Remote Target" section, look for a `../../node_modules/.bin/jest` target and click on the "inspect" link. That will open a new window with the Chrome DevTools debugger attached to the process and stopped at the beginning of the `jest.js` file. Alternatively, if the targets are not visible, click on the `Open dedicated DevTools for Node` link in the same page.
 4. You can place breakpoints or `debugger;` statements throughout the code, including the tests code, to stop and inspect

package.json

@@ -311,6 +311,12 @@
 		"test:e2e:playwright": "playwright test --config test/e2e/playwright.config.ts",
 		"test:e2e:storybook": "playwright test --config test/storybook-playwright/playwright.config.ts",
 		"test:e2e:watch": "npm run test:e2e -- --watch",
+		"test:native": "cross-env NODE_ENV=test jest --verbose --config test/native/jest.config.js",
+		"test:native:clean": "jest --clearCache --config test/native/jest.config.js; rm -rf $TMPDIR/jest_*",
+		"test:native:debug": "cross-env NODE_ENV=test node --inspect-brk node_modules/.bin/jest --runInBand --verbose --config test/native/jest.config.js",
+		"test:native:perf": "cross-env TEST_RUNNER_ARGS='--runInBand --config test/native/jest.config.js --testMatch \"**/performance/*.native.[jt]s?(x)\" --verbose' reassure",
+		"test:native:perf:baseline": "cross-env TEST_RUNNER_ARGS='--runInBand --config test/native/jest.config.js --testMatch \"**/performance/*.native.[jt]s?(x)\" --verbose' reassure --baseline --testMatch \"**/performance/*.native.[jt]s?(x)\"",
+		"test:native:update": "npm run test:native -- --updateSnapshot",
 		"test:performance": "wp-scripts test-e2e --config packages/e2e-tests/jest.performance.config.js",
 		"test:performance:debug": "wp-scripts --inspect-brk test-e2e --runInBand --no-cache --verbose --config packages/e2e-tests/jest.performance.config.js --puppeteer-devtools",
 		"test:performance:playwright": "playwright test --config test/performance/playwright.config.ts",

packages/react-native-editor/package.json

@@ -103,11 +103,6 @@
 		"preios:xcode10": "cd ../../node_modules/react-native && ./scripts/ios-install-third-party.sh && cd third-party/glog-0.3.5 && [ -f libglog.pc ] || ../../scripts/ios-configure-glog.sh",
 		"ios": "react-native run-ios",
 		"ios:fast": "react-native run-ios",
-		"test": "cross-env NODE_ENV=test jest --verbose --config ../../test/native/jest.config.js",
-		"test:debug": "cross-env NODE_ENV=test node --inspect-brk ../../node_modules/.bin/jest --runInBand --verbose --config ../../test/native/jest.config.js",
-		"test:update": "npm run test -- --updateSnapshot",
-		"test:perf": "cross-env NODE_ENV=test TEST_RUNNER_PATH=../../node_modules/.bin/jest TEST_RUNNER_ARGS='--runInBand --testMatch \"**/performance/*.native.[jt]s?(x)\" --verbose --config ../../test/native/jest.config.js' reassure",
-		"test:perf:baseline": "cross-env NODE_ENV=test TEST_RUNNER_PATH=../../node_modules/.bin/jest TEST_RUNNER_ARGS='--runInBand --testMatch \"**/performance/*.native.[jt]s?(x)\" --verbose --config ../../test/native/jest.config.js' reassure --baseline",
 		"device-tests": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=3 --testPathIgnorePatterns='canary|gutenberg-editor-rendering' --verbose --config ./jest_ui.config.js",
 		"device-tests-canary": "cross-env NODE_ENV=test jest --forceExit --detectOpenHandles --no-cache --maxWorkers=2 --testPathPattern=@canary --verbose --config ./jest_ui.config.js",
 		"device-tests:local": "cross-env NODE_ENV=test jest --runInBand --detectOpenHandles --verbose --forceExit --config ./jest_ui.config.js",
@@ -126,7 +121,6 @@
 		"clean:aztec": "cd ../react-native-aztec && npm run clean",
 		"clean:haste": "rm -rf $TMPDIR/haste-map-metro-*",
 		"clean:install": "npm run clean; npm install",
-		"clean:jest": "jest --clearCache --config ../../test/native/jest.config.js; rm -rf $TMPDIR/jest_*",
 		"clean:metro": "rm -rf $TMPDIR/metro-cache/",
 		"clean:watchman": "command -v watchman >/dev/null 2>&1 && watchman watch-del-all; true",
 		"clean:babel-cache": "rm -rf ../../node_modules/.cache/babel-loader/*",

test/native/jest.config.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 const glob = require( 'glob' ).sync;
+const path = require( 'path' );
 
 const defaultPlatform = 'android';
 const rnPlatform = process.env.TEST_RN_PLATFORM || defaultPlatform;
@@ -13,51 +14,59 @@ if ( process.env.TEST_RN_PLATFORM ) {
 	console.log( 'Setting RN platform to: default (' + defaultPlatform + ')' );
 }
 
-const transpiledPackageNames = glob( '../../packages/*/src/index.{js,ts}' ).map(
-	( fileName ) => fileName.split( '/' )[ 3 ]
+const transpiledPackageNames = glob( 'packages/*/src/index.{js,ts}' ).map(
+	( fileName ) => fileName.split( '/' )[ 1 ]
 );
 
 module.exports = {
 	verbose: true,
-	rootDir: '.',
-	roots: [ '<rootDir>/../..' ],
+	rootDir: '../../',
 	// Automatically clear mock calls and instances between every test.
 	clearMocks: true,
 	preset: 'react-native',
-	setupFiles: [ '<rootDir>/setup.js' ],
-	setupFilesAfterEnv: [ '<rootDir>/setup-after-env.js' ],
+	setupFiles: [ '<rootDir>/test/native/setup.js' ],
+	setupFilesAfterEnv: [ '<rootDir>/test/native/setup-after-env.js' ],
 	testMatch: [
-		'<rootDir>/../../test/**/*.native.[jt]s?(x)',
-		'<rootDir>/../../**/test/!(helper)*.native.[jt]s?(x)',
-		'<rootDir>/../../packages/react-native-*/**/?(*.)+(spec|test).[jt]s?(x)',
+		'<rootDir>/test/**/*.native.[jt]s?(x)',
+		'<rootDir>/**/test/!(helper)*.native.[jt]s?(x)',
+		'<rootDir>/packages/react-native-*/**/?(*.)+(spec|test).[jt]s?(x)',
 	],
 	testPathIgnorePatterns: [ '/node_modules/', '/__device-tests__/' ],
 	testEnvironmentOptions: {
 		url: 'http://localhost/',
 	},
-	resolver: '<rootDir>/../../test/unit/scripts/resolver.js',
+	resolver: '<rootDir>/test/unit/scripts/resolver.js',
 	// Add the `Libraries/Utilities` subfolder to the module directories, otherwise haste/jest doesn't find Platform.js on Travis,
 	// and add it first so https://github.com/facebook/react-native/blob/v0.60.0/Libraries/react-native/react-native-implementation.js#L324-L326 doesn't pick up the Platform npm module.
 	moduleDirectories: [
-		'../../node_modules/react-native/Libraries/Utilities',
-		'../../node_modules',
+		'node_modules/react-native/Libraries/Utilities',
+		'node_modules',
 	],
 	moduleNameMapper: {
 		// Mock the CSS modules. See https://facebook.github.io/jest/docs/en/webpack.html#handling-static-assets
-		'\\.(scss)$': '<rootDir>/__mocks__/styleMock.js',
+		'\\.(scss)$': '<rootDir>/test/native/__mocks__/styleMock.js',
 		'\\.(eot|otf|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-			'<rootDir>/__mocks__/fileMock.js',
+			'<rootDir>/test/native/__mocks__/fileMock.js',
 		[ `@wordpress\\/(${ transpiledPackageNames.join( '|' ) })$` ]:
-			'<rootDir>/../../packages/$1/src',
-		'test/helpers$': '<rootDir>/../../test/native/helpers.js',
+			'<rootDir>/packages/$1/src',
+		'test/helpers$': '<rootDir>/test/native/helpers.js',
 	},
 	modulePathIgnorePatterns: [
-		'<rootDir>/../../packages/react-native-editor/node_modules',
+		'<rootDir>/packages/react-native-editor/node_modules',
 	],
 	haste: {
 		defaultPlatform: rnPlatform,
 		platforms: [ 'android', 'ios', 'native' ],
 	},
+	transform: {
+		'\\.[jt]sx?$': [
+			'babel-jest',
+			// https://git.io/JYiYc
+			{
+				configFile: path.resolve( __dirname, 'babel.config.js' ),
+			},
+		],
+	},
 	transformIgnorePatterns: [
 		// This is required for now to have jest transform some of our modules
 		// See: https://github.com/wordpress-mobile/gutenberg-mobile/pull/257#discussion_r234978268
@@ -71,4 +80,8 @@ module.exports = {
 		printBasicPrototype: false,
 	},
 	reporters: [ 'default', 'jest-junit' ],
+	watchPlugins: [
+		'jest-watch-typeahead/filename',
+		'jest-watch-typeahead/testname',
+	],
 };