Configured jest to use the jest-watch-typeahead watch plugin. (#8093)

* Configured jest to use the jest-watch-typeahead watch plugin.

* Added some documentation in regards to jest watch mode.

docs/tests/frontend-tests.md

@@ -21,6 +21,8 @@ The testing library being used is [Jest](https://jestjs.io/).
   [preact-render-spy](https://github.com/mzgoddard/preact-render-spy) and
   [preact-render-to-json](https://github.com/nathancahill/preact-render-to-json).
 
+## Running Tests
+
 You can run those tests with:
 
 ```shell
@@ -34,15 +36,43 @@ yarn test
 ```
 
 Should you want to view only a single jest test, you can run:
+
 ```shell
 npx jest app/javascript/<path-to-file>
 ```
 
+## Running Tests in Watch Mode
+
+You can runthe frontend test suite in watch mode by running one of the following
+commands:
+
+```shell
+npm run test:watch
+```
+
+or
+
+```shell
+yarn test:watch
+```
+
+In watch mode, after the first test run, jest provides several options for
+filtering tests. These filtering options are enhanced via the
+[jest-watch-typeahead](https://github.com/jest-community/jest-watch-typeahead/blob/master/README.md)
+watch plugin. It allows you to filter by test filename or test name.
+
+![Screenshot of the jest watch menu](./jest-watch-mode-screenshot.png)
+
+## Debugging a Test
+
 To troubleshoot any of your jest test files, add a debugger and run:
+
 ```shell
 node --inspect node_modules/.bin/jest --watch --runInBand <path-to-file>
 ```
-You can read more about troubleshooting [here](https://jestjs.io/docs/en/troubleshooting).
+
+You can read more about troubleshooting
+[here](https://jestjs.io/docs/en/troubleshooting).
 
 At the end of the test's execution, you will see the code coverage for the
 Preact components in our codebase.
@@ -50,3 +80,6 @@ Preact components in our codebase.
 If tests require utility modules, create them in a `utilities` folder under the
 `__tests__` folder. Jest is configured to not treat the `utilities` folder as a
 test suite.
+
+You can also debug jest in your favorite editor. See the
+[Debugging](../frontend/debugging.md) section of the frontend documentation.

jest.config.js

@@ -33,4 +33,8 @@ module.exports = {
     // Allows developers to add utility modules that jest won't run as test suites.
     '/__tests__/utilities/',
   ],
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+  ],
 };

package.json

@@ -107,6 +107,7 @@
     "jest": "26.0.1",
     "jest-axe": "^3.4.0",
     "jest-fetch-mock": "^3.0.3",
+    "jest-watch-typeahead": "^0.6.0",
     "jsdom": "^16.2.2",
     "lint-staged": "^10.2.4",
     "node-sass": "^4.14.1",

yarn.lock

@@ -2480,7 +2480,7 @@ ansi-escapes@^3.1.0, ansi-escapes@^3.2.0:
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
-ansi-escapes@^4.2.1, ansi-escapes@^4.3.0:
+ansi-escapes@^4.2.1, ansi-escapes@^4.3.0, ansi-escapes@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
   integrity sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==
@@ -8385,7 +8385,20 @@ jest-validate@^26.0.1:
     leven "^3.1.0"
     pretty-format "^26.0.1"
 
-jest-watcher@^26.0.1:
+jest-watch-typeahead@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.6.0.tgz#cb4a2d14def3fb64950fec22edb912f93246b24f"
+  integrity sha512-mY0u5D1U/mEzeO/tpcDWnWaakuQiBp8gZY1K0HxduMeKSYm4WvbBVfU15a/hWMMs4J9FrXaYjAWs5XGlOpx5IQ==
+  dependencies:
+    ansi-escapes "^4.3.1"
+    chalk "^4.0.0"
+    jest-regex-util "^26.0.0"
+    jest-watcher "^26.0.0"
+    slash "^3.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
+
+jest-watcher@^26.0.0, jest-watcher@^26.0.1:
   version "26.0.1"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.0.1.tgz#5b5e3ebbdf10c240e22a98af66d645631afda770"
   integrity sha512-pdZPydsS8475f89kGswaNsN3rhP6lnC3/QDCppP7bg1L9JQz7oU9Mb/5xPETk1RHDCWeqmVC47M4K5RR7ejxFw==