Scripts: Improve the way test files are discovered (#17033)

* Scripts: Improve the way test files are discovered

* Fix file matching patterns and file extensions for integration tests

packages/jest-preset-default/CHANGELOG.md

@@ -1,3 +1,13 @@
+## Master
+
+### Breaking Changes
+
+- Files with `.spec.js` suffix are no longer matched as test files by default.
+
+### New Features
+
+- Align `testMatch` config option with Jest and allow test files with `.ts` suffix.
+
 ## 4.0.0 (2019-03-06)
 
 ### Breaking Changes

packages/jest-preset-default/README.md

@@ -29,7 +29,7 @@ npm install @wordpress/jest-preset-default --save-dev
 * `setupFiles` - runs code before each test which sets up global variables required in the testing environment.
 * `setupFilesAfterEnv` - runs code which adds improved support for `Console` object and `React` components to the testing framework before each test.
 * `snapshotSerializers` - makes it possible to use snapshot tests on `Enzyme` wrappers.
-* `testMatch`- includes `/test/` subfolder in the glob patterns Jest uses to detect test files. It detects only test files containing `.js` extension.
+* `testMatch`- includes `/test/` subfolder in addition to the glob patterns Jest uses to detect test files. It detects only test files containing `.js` (or `.ts`) suffix. It doesn't match files with `.spec.js` suffix.
 * `timers` - use of [fake timers](https://jestjs.io/docs/en/timer-mocks.html) for functions such as `setTimeout` is enabled.
 * `transform` - keeps the default [babel-jest](https://github.com/facebook/jest/tree/master/packages/babel-jest) transformer.
 * `verbose` - each individual test won't be reported during the run.

packages/jest-preset-default/jest-preset.json

@@ -15,9 +15,9 @@
 		"<rootDir>/node_modules/enzyme-to-json/serializer.js"
 	],
 	"testMatch": [
-		"**/__tests__/**/*.js",
-		"**/?(*.)(spec|test).js",
-		"**/test/*.js"
+		"**/__tests__/**/*.[jt]s",
+		"**/test/*.[jt]s",
+		"**/?(*.)test.[jt]s"
 	],
 	"timers": "fake",
 	"transform": {

packages/scripts/CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Master
 
+### Breaking Changes
+
+- Test files matching has changed to fix the overlap between two types of tests implemented with `test-e2e` and `test-unit`. Refer to the documentation of the corresponding scripts to learn about new file discovery rules.
+
 ### New Features
 
 - The bundled `puppeteer` dependency has been updated from requiring `1.6.1` to requiring `^1.19.0` ([#16875](https://github.com/WordPress/gutenberg/pull/16875)). It uses Chromium v77 instead of Chromium v69.

packages/scripts/README.md

@@ -252,6 +252,11 @@ This is how you execute those scripts using the presented setup:
 * `npm run test-e2e FILE_NAME -- --puppeteer-interactive ` - runs one test file interactively.
 * `npm run test-e2e:watch -- --puppeteer-interactive` - runs all tests interactively and watch for changes.
 
+Jest will look for test files with any of the following popular naming conventions:
+
+- Files with `.js` (or `.ts`) suffix at any level of depth in `spec` folders.
+- Files with `.spec.js` (or `.spec.ts`) suffix.
+
 This script automatically detects the best config to start Puppeteer but sometimes you may need to specify custom options:
  - You can add a `jest-puppeteer.config.js` at the root of the project or define a custom path using `JEST_PUPPETEER_CONFIG` environment variable. Check [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer#jest-puppeteerconfigjs) for more details.
 
@@ -285,6 +290,12 @@ This is how you execute those scripts using the presented setup:
 * `npm run test:unit:help` - prints all available options to configure unit tests runner.
 * `npm run test:unit:watch` - runs all unit tests in the watch mode.
 
+Jest will look for test files with any of the following popular naming conventions:
+
+- Files with `.js` (or `.ts`) suffix located at any level of depth in `__tests__` folders.
+- Files with `.js` (or `.ts`) suffix directly located in `test` folders.
+- Files with `.test.js` (or `.test.ts`) suffix.
+
 #### Advanced information
 
 It uses [Jest](https://jestjs.io/) behind the scenes and you are able to use all of its [CLI options](https://jestjs.io/docs/en/cli.html). You can also run `./node_modules/.bin/wp-scripts test:unit --help` or `npm run test:unit:help` (as mentioned above) to view all of the available options. By default, it uses the set of recommended options defined in [@wordpress/jest-preset-default](https://www.npmjs.com/package/@wordpress/jest-preset-default) npm package. You can override them with your own options as described in [Jest documentation](https://jestjs.io/docs/en/configuration). Learn more in the [Advanced Usage](#advanced-usage) section.

packages/scripts/config/jest-e2e.config.js

@@ -11,9 +11,8 @@ const { hasBabelConfig } = require( '../utils' );
 const jestE2EConfig = {
 	preset: 'jest-puppeteer',
 	testMatch: [
-		'**/__tests__/**/*.js',
-		'**/?(*.)(spec|test).js',
-		'**/test/*.js',
+		'**/specs/**/*.[jt]s',
+		'**/?(*.)spec.[jt]s',
 	],
 };