From b4daf92750381ff14776b049db5e34f92d832fe6 Mon Sep 17 00:00:00 2001 From: David Calhoun Date: Fri, 7 Jul 2023 11:16:58 -0400 Subject: [PATCH] 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 | 2 +- .gitignore | 2 +- .../getting-started-react-native.md | 4 +- .../code/react-native/osx-setup-guide.md | 2 +- docs/contributors/code/testing-overview.md | 2 +- package.json | 6 +++ packages/react-native-editor/package.json | 6 --- test/native/jest.config.js | 47 ++++++++++++------- 8 files changed, 42 insertions(+), 29 deletions(-) diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml index e222083a160e9a..09494f0d514ad4 100644 --- a/.github/workflows/unit-test.yml +++ b/.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" diff --git a/.gitignore b/.gitignore index 19e43aecea7b82..b44eabe00cccc7 100644 --- a/.gitignore +++ b/.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 diff --git a/docs/contributors/code/react-native/getting-started-react-native.md b/docs/contributors/code/react-native/getting-started-react-native.md index 96338af7a6f2f7..9b8ae44f0d8b18 100644 --- a/docs/contributors/code/react-native/getting-started-react-native.md +++ b/docs/contributors/code/react-native/getting-started-react-native.md @@ -89,7 +89,7 @@ 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. @@ -97,7 +97,7 @@ It will run the [jest](https://github.com/facebook/jest) test runner on your tes 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. diff --git a/docs/contributors/code/react-native/osx-setup-guide.md b/docs/contributors/code/react-native/osx-setup-guide.md index 5d6d4603e49598..dab5f33448b74d 100644 --- a/docs/contributors/code/react-native/osx-setup-guide.md +++ b/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 diff --git a/docs/contributors/code/testing-overview.md b/docs/contributors/code/testing-overview.md index 42704be233b9b9..946aec8cd70e3e 100644 --- a/docs/contributors/code/testing-overview.md +++ b/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 diff --git a/package.json b/package.json index 12d7d4ae6e64e7..f95417f61b35eb 100644 --- a/package.json +++ b/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", diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 4034ada7699cab..ceb39c10b0c3c6 100644 --- a/packages/react-native-editor/package.json +++ b/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/*", diff --git a/test/native/jest.config.js b/test/native/jest.config.js index 22bd62065ca7d8..1e6031ee89c775 100644 --- a/test/native/jest.config.js +++ b/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: '../../', // Automatically clear mock calls and instances between every test. clearMocks: true, preset: 'react-native', - setupFiles: [ '/setup.js' ], - setupFilesAfterEnv: [ '/setup-after-env.js' ], + setupFiles: [ '/test/native/setup.js' ], + setupFilesAfterEnv: [ '/test/native/setup-after-env.js' ], testMatch: [ - '/../../test/**/*.native.[jt]s?(x)', - '/../../**/test/!(helper)*.native.[jt]s?(x)', - '/../../packages/react-native-*/**/?(*.)+(spec|test).[jt]s?(x)', + '/test/**/*.native.[jt]s?(x)', + '/**/test/!(helper)*.native.[jt]s?(x)', + '/packages/react-native-*/**/?(*.)+(spec|test).[jt]s?(x)', ], testPathIgnorePatterns: [ '/node_modules/', '/__device-tests__/' ], testEnvironmentOptions: { url: 'http://localhost/', }, - resolver: '/../../test/unit/scripts/resolver.js', + resolver: '/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)$': '/__mocks__/styleMock.js', + '\\.(scss)$': '/test/native/__mocks__/styleMock.js', '\\.(eot|otf|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': - '/__mocks__/fileMock.js', + '/test/native/__mocks__/fileMock.js', [ `@wordpress\\/(${ transpiledPackageNames.join( '|' ) })$` ]: - '/../../packages/$1/src', - 'test/helpers$': '/../../test/native/helpers.js', + '/packages/$1/src', + 'test/helpers$': '/test/native/helpers.js', }, modulePathIgnorePatterns: [ - '/../../packages/react-native-editor/node_modules', + '/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', + ], };