jest: typeahead hints

One of those slightly annoying features of Jest’s watch mode is the regex pattern matching. It’s wonderful in how powerful it is, but it relies on the engineer knowing which tests exist and then typing out an appropriately specific pattern.

Fortunately, there’s jest-watch-typeahead, a community project designed to address this exact point.jest-watch-typeahead is one of a group of plugins all designed to play with Jest’s watch mode (some others are documented here).

Let’s walk through configuring and using the typeahead plugin to see how it works!

Configuring Jest-Watch-Typeahead

First, we’ll need to install the package:

% yarn add --dev jest-watch-typeahead

Next, update the jest.config.js to include the plugin(s) in the watchPlugins portion of the configuration.¹ jest-watch-typeahead has two separate modules to import: filename and testname:

module.exports = {
  watchPlugins: [
    "jest-watch-typeahead/filename",
    "jest-watch-typeahead/testname",
  ],
}

Using Jest-Watch-Typeahead For Files

One this is done, if we run jest in watch mode, and enter into filtering by filename regex pattern (p):

 Watch Usage
 › Press a to run all tests.
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press P to select projects (all selected).
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

If the plugins are correctly installed and configured, there will be an addition to the standard “pattern > ” prompt in the shell, a highlighted line with the text: “Start typing to filter by a filename regex pattern.”

Once you start typing, the plugin will display all matching tests, which can then be navigated to via the keyboard and selected with the return key.

Alternatively, if you want to run multiple tests with a pattern, you can still do that - but now typeahead gives you the visual indication of which tests will be caught by your pattern, instead of having to resort to trial-and-error.

Using Jest-Watch-Typeahead For Tests

Because we configured both filename and testname in our watch plugins, we can also use the lookahead to filter by test names.²

Footnotes

• ¹ If you’re interested in learning more about Watch Plugins, this Jest documentation is a good place to start.
• ² That’s the theory at least. I’m currently running into a type error when I try to use the testname.