Setting Up Watch Mode in Jest

Before diving into the specifics, let's start by adding a script to your package.json that will make running Jest in watch mode easier.

Step 1: Add the Watch Script

In your package.json file, add the following script:

"scripts": {
  "watch": "jest --watch"
}

This script allows you to start Jest in watch mode by simply running:

npm run watch

or

yarn watch

Understanding Watch Mode

This is a super handy feature that can be enabled in Jest with the watch mode — this essentially allows for enabling automagical re-running of tests whenever some input files have changed. Ideally, checking your code works should only take a few seconds but this immediate feedback loop is crucial in catching bugs early and making sure that the way you are writing things stays correct.

• Press a to run all tests.
• Press f to run only failed tests.
• Press p to filter by a filename regex pattern.
• Press t to filter by a test name regex pattern.
• Press q to quit watch mode.
• Press Enter to trigger a test run.

Let’s break down each of these commands and how you can leverage them in your development process.

Running All Tests (a)

Running all tests is useful when you want to ensure that your entire codebase is functioning as expected. In watch mode, you can trigger all tests by pressing a.

Example:

If you're in watch mode and have made several changes across different parts of your project, pressing a will run every test file to check for regressions.

npm run watch

Then press a in the terminal to run all tests.

Use Case: Running all tests is particularly useful before a major commit or deployment to ensure that nothing is broken in the codebase.

Running Only Failed Tests (f)

One of the standout features of Jest's watch mode is the ability to rerun only the tests that failed during the last run. This is incredibly time-efficient when you’re focused on fixing specific issues.

Example:

After making changes to your code, you might see some tests fail. To focus only on those, press f in watch mode.

npm run watch

Then press f in the terminal to run only failed tests.

Use Case: This feature is ideal for debugging. You can repeatedly run the failing tests without being distracted by the ones that pass, allowing you to fix issues more efficiently.

Filtering by Filename Regex Pattern (p)

When working on specific parts of your project, you might want to run only the tests related to those files. Jest allows you to filter test files by a filename regex pattern.

Example:

If you want to run tests only in files that contain the word "auth", you can press p in watch mode and type:

auth

Jest will then run only the tests in files that match this pattern.

npm run watch

Then press p in the terminal, followed by your desired pattern.

Use Case: Filtering by filename is particularly useful in large projects where running all tests might be time-consuming. This allows you to focus on testing only the parts of the codebase you’re actively working on.

Filtering by Test Name Regex Pattern (t)

Jest also allows you to filter tests by their names, which is useful when you want to run a specific test or group of tests.

Example:

Suppose you have a test named "renders the login component correctly". You can press t in watch mode and type:

renders the login component correctly

Jest will run only this test or any other tests that match the pattern you’ve entered.

npm run watch

Then press t in the terminal, followed by your desired test name pattern.

Use Case: This is ideal when you’re focusing on a particular feature or bug and want to quickly iterate on the relevant test cases without running unrelated tests.

Quitting Watch Mode (q)

Watch mode is convenient, but there are times when you need to exit it and return to your normal workflow. Jest allows you to quit watch mode by pressing q.

Then press q in the terminal to exit watch mode.

Use Case: You might want to quit watch mode after confirming that your tests are passing or when you're shifting focus to other tasks.

Triggering a Test Run (Enter)

Sometimes, after making changes, you may want to rerun the tests without altering any filters or modes. Simply pressing Enter in watch mode triggers a fresh test run with the current settings.

npm run watch

Then press Enter in the terminal to rerun the tests.

Use Case: This is useful when you’re iterating on changes and want to quickly see the effects without changing any watch mode settings.

Conclusion

Jest’s watch mode and its advanced filtering options provide a powerful way to streamline your testing process in Next.js. By understanding and leveraging these features, you can significantly improve your development workflow, catch bugs early, and ensure your code remains reliable.