diff --git a/docs/tests/frontend-tests.md b/docs/tests/frontend-tests.md index d0292c7f3..b223c9fe5 100644 --- a/docs/tests/frontend-tests.md +++ b/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/ ``` +## 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 ``` -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. diff --git a/docs/tests/jest-watch-mode-screenshot.png b/docs/tests/jest-watch-mode-screenshot.png new file mode 100644 index 000000000..0c3d57e26 Binary files /dev/null and b/docs/tests/jest-watch-mode-screenshot.png differ diff --git a/jest.config.js b/jest.config.js index 40233fd98..d8a040b2f 100644 --- a/jest.config.js +++ b/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', + ], }; diff --git a/package.json b/package.json index 59d75ffb6..d36774009 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 72cf49795..99f8069cd 100644 --- a/yarn.lock +++ b/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==