Welcome back to our journey into the realm of React testing! In today’s blog post, we will delve into Jest Watch Mode, a powerful feature that helps streamline your testing process, especially as your codebase grows. This guide will aid you in optimizing your tests, enhancing productivity, and focusing only on what’s relevant to you during development.

What is Jest Watch Mode?

When you run yarn test or npm test, Jest operates in what is known as watch mode. But what exactly does this mean? Watch mode is a feature that allows Jest to monitor files for changes since the last commit and to execute tests pertinent only to those files that have been modified. This is particularly helpful in large projects with hundreds of tests, as it ensures your testing workflow remains efficient and fast.

Benefits of Using Watch Mode

1. Increased Speed: By running tests only for changed files, Jest significantly reduces the amount of time spent running tests, which can otherwise be lengthy in large codebases.
2. Focused Testing: As a developer, watch mode allows you to concentrate on the tests that matter to you at that moment without being distracted by the state of your entire testing suite.
3. Streamlined Workflow: Continuous feedback while coding enables a more agile approach to development, making it easier to catch and fix errors as they arise.

How to Use Watch Mode in Jest

Step 1: Start Your Testing Environment

To begin, open your project in Visual Studio Code (VS Code). You can check which files you have changed in the Source Control panel. When you have your modified code ready, run the following command to start Jest in watch mode:

yarn test
# or
npm test

Step 2: Observe the Behavior

Once Jest starts, it will only run tests related to the files that have been altered. For example, if you make changes to specific components, only the tests tied to those components will be executed. If you observe that there’s a test in app.test.tsx, and it has not changed, Jest will not execute this test until it is modified.

Step 3: Committing Changes

As you work, you may choose to commit your changes using:

git add .
git commit -m "Added greet component and tests"

Stop the Jest process with CTRL + C, then re-run yarn test. This time, you will receive a notification stating that no tests were found related to the files changed since your last commit. Pressing A will trigger all tests to run.

Step 4: Rerunning Tests After Modifications

After confirmation that all your tests are running, feel free to make additional modifications to your test files. For instance:

• Open greet.test.tsx and make a small change.
• Save the file, and rerun yarn test again.

You will see that Jest now watches greet.test.tsx, executing all the tests present in that file. If you’re successful, both tests should pass without complications.

Quick Recap

Jest’s watch mode is an integral default feature added by Create React App to the test script. It operates effectively by monitoring changes and executing only the necessary tests. This makes it crucial for developers to familiarize themselves with how watch mode functions:

• Watches your changed files: Executes tests related to only those files modified since the last commit.
• Boosts test execution speed: Allows for quicker feedback, making your development process more enjoyable.

In our next video, we will explore how to filter tests to run only specific tests based on certain criteria. This will further empower you to control your testing suite’s execution with precision and effectiveness.

With these tips and insights on Jest watch mode, you can ensure that your React testing workflow remains efficient and effective. If you have any further questions or need clarification on Jest or any other topic, feel free to reach out!

Join our learning community and let’s continue enhancing our skills together!